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前 端 开 发 者 手册 
这 是 任何 人 都 可 以 用 来 学 习 前 端的 实践 手册 , 它 概述 并 讨论 了 前 端 工程 的 实践: 该 如 何 学 习 以 
及 实践 时 该 使 用 什么 工具 


撰写 该 手册 的 目的 有 两 个 : 一 是 为 潜在 以 及 正在 实践 的 前 端 开 发 人 员 提供 一 个 包括 学 习 资料 和 
开发 工具 的 专业 资源 ; 二 是 该 手册 可 以 被 管理 者 , CTO, 讲师 和 猎头 用 来 作为 洞察 前 端 开 发 的 实 
R 


该 手册 的 内 容 支 持 Web 技 术 (HTML, CSS, DOM, 和 JavaScript), 并 且 手 册 提 供 的 解决 方案 都 
直接 建立 在 这 些 开 放 的 技术 之 上 . 手册 中 所 引用 的 素材 和 讨论 都 是 最 好 的 或 者 当前 前 端 开发 者 
们 需要 面 对 的 问题 . 


该 手册 不 应 该 被 视 为 一 个 前 端 开 发 者 对 所 有 可 用 资源 的 综合 大 纲 , 其 价值 在 于 简洁 , 专注 和 及 
时 管理 足够 的 分 类 信息 , 不 致 于 任何 人 沉浸 在 任何 一 个 特定 的 主题 


该 手册 会 每 年 发 布 一 个 更 新 内 容 . 
该 手册 分 为 三 个 部 分 : 


第 二 部 分 : 学 习 前 端 开 发 


第 二 部 分 为 成 为 一 个 前 端 开发 人 员 确 定 了 自主 学 习 的 直接 资源 


在 线 阅读 : 前 端 开发 者 手册 
资源 下 载 : pdf mobi 
Issues/Suggestions/Fixes: Front-end Developer Handbook 


说 明 : 该 手册 参考 Front-end Developer Handbook 电子 书 所 译 , 不 当 之 处 ,欢迎 pr 或 提出 
issue. 


联系 译 者 : 


前 端 开发 者 手册 


e 博客 : Blog 
e 微 博 : 会 飞 的 Pikachu 
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This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 


Unported License 


什么 是 前 端 开发 者 ? 


一 个 前 端 开 发 者 , 要 会 使 用 Web 技 术 (如 : HTML,CSS,DOM 和 JavaScript) 设 计 和 开发 网 站 应 用 . 
网 站 应 用 , 或 运行 于 Web 平台 Z, 或 用 于 编译 非 Web 平 台 环 境 的 输入 (如 : NativeScript). 


—-THE BACK END—— 





I 
A site is loaded Client-side scripts When a call to the 1 | Server-side scripts 
in a browser from Run in the browser and database is required = | - process the data, 
the server. process requests without JavaScript and AJAX send | | — 一 个 < 1 then update the 
Ce call-backs to the server requests to the back end. - J, | UNAN | site—populating 
(> Wo | 1 drop-down menus, 
B ‘ Request de | = | C | loading products to a 
\ a 用 | =N z 1 aJ I page, updating a user 
= y Response i | ~ 1 profile, and more. 
= SS | " Database | 
| / | Servers i 
(OTTEET) 
Responsive front-end Everything a user sees in the The back-end server-side scripts process 
design allows a site to browser is a mix of HTML, the request, pull what they need from the 
adapt to a user’s device. CSS, and JavaScript. database then send it back. 


图 片 来 源 : httos:/www.upwork.com/hiring/development/front-end-developer/ 


一 般 而 言 , 一 个 人 可 以 通过 学 习 HTML,CSS,JavaScript 进 入 前 端 开发 领域 , 这 些 1 
Webi A, DEAR KZ, Web 视 图 之 中 , 或 用 于 编译 本 地 运行 环境 的 输入 . 后 文 将 1i 
这 四 个 运行 场景 . 


= 


Web 浏 览 器 是 用 于 检索 , 呈现 和 遍历 万 维 网 (WWW) 信 息 的 软件 . 一 般 而 言 , 浏览 器 可 以 运行 在 
台式 机 , 笔记 本 电脑 , 平板 电脑 或 手机 . 但 是 近来 , 几乎 在 任何 事物 上 都 能 够 发 现 浏 览 器 (如 : 冰 
箱 上 , 汽车 里 等 ). 

普遍 的 Web 浏 览 器 如 下 : 


e Chrome 

e Internet Explorer 
e Firefox 

e Safari 


无 党 浏览 器 是 指 没有 图 形 用 户 界 面 的 Web 浏 览 器 , 可 以 通过 命令 
目的 (如 : 功能 测试 , 单元 测试 等 ). 把 无 这 浏览 器 当做 可 以 从 命令 
索 和 遍历 网 页 . 


运行 的 浏览 器 , 它 依然 可 以 检 


普遍 的 无 这 浏 览 器 如 下 : 


e PhantomJS 
e slimerjs 
e trifleJS 


Webviews 被 本 地 OS 用 来 运行 网 页 . 把 Web 视 图 当做 Web 浏 览 器 中 的 iframe 或 者 单个 的 Tab， 
其 葡 入 于 运行 在 设备 上 的 本 地 应 用 程序 中 (如 : iOS, android, windows). 


Web 视 图 开发 最 普遍 的 解决 方案 如 下 : 


e Cordova (用 于 本 地 手机 /平板 应 用 ) 
e NW.js (PP Node-Webkit, 用 于 桌面 应 用 ) 
e Electron (用 于 桌面 应 用 ) 


最 后 , 前 端 开 发 者 从 Web 浏览 器 开发 环境 中 学 到 的 东西 也 可 以 用 于 不 受 浏览 器 引擎 驱动 的 环 
境 下 . 目前 , 脱离 Web 引擎 ， 使 用 Web 技术 (如 : CSS 和 JavaScript) 去 创建 趴 正 的 本 地 应 用 的 
开发 环境 正在 出 现 . 

此 类 环境 的 示例 如 下 : 


e NativeScript 
e React Native 


译 者 补充 : 
© 达到 什么 样 的 标准 才能 是 大 公司 要 的 前 端 
o 写 给 初学 前 端 工程 师 的 一 封 信 
o 前 端 路 上 的 旅行 
e React Native 专 题 


前 端的 工作 职称 


下 面 是 一 个 前 端 开发 者 在 职业 发 展 中 各 种 职称 的 描述 列表 . 对 于 前 端 开发 者 最 普遍 的 职称 是 
"前 端 开 发 者 " 或 者 "前 端 工程 师 "， 可 以 根据 任何 包 包含 "前 端 "， "客户 端 "， "web UI", "CSS", 
"HTML" 和 "JavaScript" 的 职称 推断 一 个 人 对 HTML, CSS 和 JavaScript 的 了 解 程度 . 


前 端 开发 者 /工程 师 (又 称 作 Web 前 端 开 发 者 /工程 师 , 客户 端 开发 者 /工程 师 , 前 端 软件 开发 者 / 
工程 师 或 Ul 工程 师 ) 


这 是 通用 的 职称 , 用 于 描述 一 个 开发 者 对 HTML, CSS, JavaScript 有 很 熟练 的 掌握 , 并 能 在 
Web 平 台 上 应 用 这 些 技术 . 


CSS/HTML 开 发 者 


这 个 职称 用 于 描述 一 个 开发 者 精通 于 CSS 和 HTML, 但 是 对 JavaScript 和 应 用 不 熟悉 . 


前 端 JavaScript( 可 选 , 应 用 程序 ) 开 发 人 员 


当 职 称 中 包含 "JavaScript 应 用 程序 " 时 , 这 就 表示 此 开发 人 员 是 一 个 拥有 高 级 编程 , 软件 开发 
和 应 用 程序 开发 技能 (如 : 有 构建 前 端 应 用 程序 的 实践 经 验 ) 的 高 级 JavaScript 开发 者 . 


前 端 Web 设 计 师 


当 职 称 中 包含 "设计 师 " 时 , 这 就 表示 此 设计 师 不 仅 拥 有 前 端 技能 (如 : HTML & CSS), 还 拥有 专 
业 的 设计 技能 (视觉 设计 和 交互 设计 ). 


Web/ 前 端 用 户 界 面 (又 称 U1) 开 发 者 /工程 师 


当 职 称 中 包含 "界面 "或 者 "UI" 时 , 这 就 表示 此 开发 人 员 除 了 掌握 前 端 技能 , 还 拥有 交互 设计 技 


26 
AG. 


移动 /平板 前 端 开发 者 


当 职称 中 包含 "移动" 或 者 "平板 " 时 , 这 就 表示 此 开发 人 员 在 开发 运行 在 移动 或 平板 设备 上 的 
前 端 应 用 (或 本 机 程序 , 或 运行 在 Web 平 台 , 例如 浏览 器 ) 很 有 经 验 . 


ay 3% SEO 专家 


当 职 称 中 包含 "SEO" 时 , 这 就 表示 此 开发 者 对 一 个 SEO 策略 定制 前 端 技术 有 着 丰富 的 经 验 . 


前 端 可 访问 性 专家 
当 职 称 中 包含 "可 访问 性 " 时 , 这 就 表示 此 开发 者 对 定制 支持 可 访问 性 要 求 和 标准 的 前 端 技术 有 
着 丰富 的 经 验 . 


当 职 称 中 包含 "开发 运 维 " 时 , 这 就 表示 此 开发 者 对 软件 开发 实践 与 合作 , 集成 , BA, 自动 化 和 
着 丰富 的 


前 端 测 试 /QA 


当 职 称 中 包含 "测试 "或 "QA" 时 , 这 就 表示 此 开发 者 对 测试 和 软件 管理 , 包括 单元 测试 , 功能 测 
R, 用 户 测试 和 AB 测试 有 着 丰富 的 经 验 . 


注意 , 若 你 在 职称 中 碰 到 "全 栈 " 或 类 似 于 "Web 开 发 者 " 一 样 的 职位 , 这 些 可 能 是 雇主 用 来 描 
这 个 角色 负责 Web/ 应 用 程序 开发 的 各 个 方面 , 即 包 括 前 端 和 后 端 (还 可 能 包括 设计 ). 


译 者 补充 : 


o 谈 前 端 工程 师 的 职业 规划 


前 端 开发 者 常用 的 网 络 技术 





前 端 开发 者 常用 的 网 络 技术 如 下 : 


e Hyper Text Markup Language( 超 文本 标记 语言 , 又 称 HTML) 

e Cascading Style Sheets (2 # N% AŠ, 又 称 CSS) 

e Document Object Model (文档 对 象 模 型 , X# DOM) 

e JavaScript Programming Language (JavaScript# #278 & , 又 称 : ECMAScript 6, ES6, 
JavaScript 2015) 

e Web API's (Web 应 用 程序 接口 , 又 称 HTML5 API 或 浏览 器 API) 

e Hypertext Transfer Protocol (起 文本 传输 协议 , 又 称 HTTP) 

e Uniform Resource Locator's (统一 资源 定位 符 , 又 称 URL) 

e JavaScript Object Notation (JavaScript 对 象 表示 , 又 称 JSON) 

e Web Content Accessibility Guidelines (网 页 内 容 无 障碍 设计 指南 , 又 称 WCAG) & 
Accessible Rich Internet Applications ( 富 Internet 应 用 程序 的 无 障碍 设计 , 又 称 ARIA) 


根据 相关 的 文档 和 规范 , 这 些 技术 定义 如 下 . 作为 一 个 比较 , 你 可 以 在 platform.html5.org 上 看 
到 所 有 与 Web 相 关 的 规范 


Hyper Text Markup Language( 起 文本 标记 语言 , 又 称 HTML) 


HTML 文件 泻 业 成 可 见 的 或 者 可 听 到 的 . HTML 随 着 线索 提示 , 语义 化 地 描述 了 网 站 的 结 
构 , 使 它 成 为 一 种 标记 语言 , 而 不 是 编程 语言 . - Wikipedia.org 


更 多 相关 的 文档 /规范 : 


e W3C HTML5 规范 : HTML5 是 WWW 核 心 语言 的 主要 修订 
e HTML 元 素 在 线 标 准 


常用 的 网 络 技术 


e HTML 在 线 语法 

© 所 有 W3C HTML 规范 
e HTML 元 素 参考 

。 HTML 属性 参考 

© 全 局 属性 


Cascading Style Sheets (4 # A74 AR, 又 称 CSS) 


层 受 式样 式 表 (CSS) 是 用 于 描述 外 观 和 格式 化 标记 语言 编写 的 文档 的 样式 表 语 言 , 尽管 经 
常 被 用 来 改变 用 HTML 和 XHTML 编写 的 网 页 和 用 户 界面 的 样式 , 但 也 可 用 于 任何 XML 
文档 , 包括 纯 XML, SVG 和 XUL. 跟 JavaScript 和 HTML 一 样 , CSS 是 被 大 多 数 网 站 用 于 
为 Web 应 用 程序 创建 富有 吸引 力 的 网 页 , 用 户 界面 的 一 种 基础 技术 , 也 为 许多 移动 应 用 程 
序 创 建 用 户 界 面 . - wikipedia.org 


更 多 相关 的 文档 /规范 : 


e CSS 2.2 规 范 

e CSS 3% 48 

e 所 有 W3C CSS 规范 
。 CSS 参考 


Document Object Model (文档 对 象 模 型 , 又 称 DOM) 


文档 对 象 模型 用 于 代表 和 对 象 交 互 的 HTML, XHTML 和 XML 文档 , 是 一 种 跨 平 台 和 语言 

无 关 性 的 约定 . 每 一 份 文档 的 所 有 节点 被 组 织 成 一 种 树 结 构 , FRA DOM 树 . DOM 对象 通 
过 使 用 对 象 上 的 方法 被 处 理 和 操作 , 一 个 DOM 对 象 的 公共 接口 被 指定 为 它 的 应 用 程序 编 
42.4% 0 (API). - wikipedia.org 


更 多 相关 的 文档 /规范 : 


e W3C DOM4 
e DOM 在 线 标 准 
e DOM 3 事件 规范 


JavaScript Programming Language (JavaScript 编 程 语言 , 又 称 : ECMAScript 6, ES6, 
JavaScript 2015) 


JavaScript 是 一 种 高 级 的 , 动态 的 , 无 类 型 的 和 解释 型 的 编程 语言 , 它 已 经 在 ECMAScript 
语言 规范 中 被 标准 化 . IR HTML 和 CSS 一 样 , JavaScript WWW 内 容 生 成 的 第 三 种 必 

不 可 少 的 技术 ; 大 多 数 的 网 会 使 用 Javascript, 并 且 Javascript 被 所 有 现在 Web 浏 览 器 

持 . JavaScript 基于 原型 和 函数 优先 的 特点 , 使 它 成 为 多 范 型 的 语言 , 支持 面向 对 象 的 , 命 

令 式 的 , 和 函数 式 编程 风格 . JavaScript 能 提供 AP] 来 处 理 文本 , 数组 , 日 期 和 正则 表达 式 ， 
但 不 包括 任何 W/O, 如 网 络 , 存储 或 图 形 工具 , 对 这 些 的 依赖 取决 于 宿主 环境 中 肯 入 了 什么 . 
- Wikipedia.org 


常用 的 网 络 技术 


更 多 相关 的 文档 /规范 : 


e ECMAScript 2015 语言 规范 


Web API's (Web 应 用 程序 接口 , 又 称 HTML5 API) 


当 使 用 JavaScript 为 Web 程 序 写 代码 时 , 有 很 多 不 错 的 API 是 可 以 利用 的 . 下 面 列举 了 所 


有 在 Web APP 或 网 站 开发 中 可 


更 多 相关 文档 : 


e Web API 接口 


能 会 用 到 的 接口 . - Mozilla 


Hypertext Transfer Protocol (起 文本 传输 协议 , 又 称 HTTP) 


超 文 本 传输 协议 是 一 个 用 于 分 布 式 , 协作 和 超 媒体 信息 系统 的 应 用 协议 , 是 WWW 数据 通 


信 的 基础 . - wikipedia.org 


更 多 相关 规范 : 


e Hypertext Transfer Protocol -- HTTP/1.1 
e Hypertext Transfer Protocol version 2 draft-ietf-httpbis-http2-16 


Uniform Resource Locator's (统一 资源 定位 符 , 又 称 URL) 


一 个 URL (也 称 Web 地 址 ) 是 一 个 资源 引用 , 指定 了 资源 在 计算 机 网 络 和 检索 机 制 中 的 位 
置 .与 之 类 似 的 概念 是 Uniform Resource Identifier(URI), 尽管 许多 人 认为 两 个 术语 可 以 

互 换 使 用 , 但 URL 是 统一 资源 标识 符 ( URI )[3] 的 具体 类 型 . 一 个 URL 意味 着 一 种 访问 次 
源 量 的 方式 , 但 这 并 不 适用 于 URI. [4][5]URL 不 仅 常 用 于 引用 一 个 网 页 (http), 也 可 用 于 文 
件 传 输 (ftp), 邮件 (mailto), 数据 库 访问 (JDBC) 和 许多 其 它 应 用 . -wikipedia.org 


更 多 相关 规范 : 


e URL 
e URL 在 线 标准 


JavaScript Object Notation (JavaScript 对 象 表示 , 又 称 JSON) 


JSON, 有 时 也 称 JavaScript 对 象 表示 , 是 一 种 使 用 人 类 可 读 的 文本 传输 由 键 值 对 组 成 的 

数据 对 象 的 开放 格式 . 对 于 异步 浏览 器 /服务 器 通信 (AJAJ), JSON 是 主要 的 数据 格式 , 很 

大 程度 上 代替 了 XML(AJAX). 尽管 最 初 是 从 JavaScript 脚本 语言 衍生 而 来 , 但 是 ISON 

是 语言 无 关 性 的 数据 格式 , 在 许多 编程 语言 中 , 代码 解析 和 生成 ISON RARE FH. ISON 

的 格式 最 初 是 由 Douglas Crockford 指定 的 , 但 目前 却 被 描述 成 两 种 标准 : RFC 7159 和 

ECMA-404. ECMA 标准 只 允许 被 合法 的 语法 语句 描述 , 而 RFC 则 提供 了 一 些 语义 化 描述 

和 安全 考虑 . ISON 的 官方 网 络 媒 体 类 型 application / JSON, 扩展 名 是 json. - 


wikipedia.org 


更 多 相关 规范 : 
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Rw Ah gA 24 4 E 
利用 的 网 络 技术 


e JSON 介绍 
© JSON 数据 交换 格式 
e JSON API 


Web Content Accessibility Guidelines (网 页 内 容 无 障碍 设计 指南 , 又 称 WCAG) & 
Accessible Rich Internet Applications ( 富 Internet 应 用 程序 的 无 障碍 设计 , 又 称 ARIA) 


无 障碍 设计 是 指 产品 , 设备 , 服务 , 或 者 环境 是 为 残疾 人 设计 的 . 无 障碍 设计 的 概念 意味 着 


与 一 个 人 的 辅助 技术 (例如 , 电脑 屏幕 阅读 器 ) 相 兼容 , 确保 直接 访问 ( 即 独立 ) 和 "间接 访问 " 


- Wikipedia.org 


。 无 障碍 设计 网 络 倡议 (WAI) 

© 网 页 内 容 无 障碍 设计 指南 (WCAG) 的 目前 状态 

。 富 Internet 应 用 程序 的 无 障碍 设计 (WAI-ARIA) 的 目前 状态 
译 者 补充 : 


© Web 端 开 发 常用 资源 
e Web 前 端 开发 资源 
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端 开发 的 技术 栈 
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对 于 任何 类 型 的 前 端 开发 人 员 , HTML, CSS, DOM, JavaScript, HTTP/URL 和 浏览 器 利用 是 基 
本 的 技术 要 求 . 


对 于 HTML, CSS, DOM, JavaScript, HTTP/URL 和 浏览 器 开发 之 外 的 , 一 个 前 端 开发 者 还 应 该 
掌握 下 面 技术 列表 中 的 一 个 或 多 个 : 


e Content Management System (内 容 管 理 系统 , 又 称 CMS) 
e Node.js 

e Cross-browser testing kis 浏览 器 测试 ) 

Cross-platform testing ( 跨 平 台 双 测 试 ) 

Unit Testing (单元 测试 ) 

e Cross-device testing ( 跨 设 备 测试 ) 

e Accessibility / WAI-ARIA (无 障碍 访问 /无 障碍 富 Internet 应 用 程序 ) 
。 Search Engine Optimization (搜索 引擎 优化 , 又 称 SEO) 

e Interaction or User Interface design (交互 或 用 户 设 计 ) 

e User Experience (用 户 体验 ) 

e Usability (可 用 性 / 易 用 性 ) 

e E-commerce Systems (电子 商务 系统 ) 

e Portal Systems (门户 系统 ) 

e Wireframing (框架 ) 

e CSS layout / Grids (CSS 布局 / 栅 格 系统 ) 

e DOM manipulation (e.g. jQuery) (DOM 操作 ) 

Mobile Web Performance (移动 Web 性 能 ) 

Load Testing (载荷 测试 ) 

e Performance Testing (性 能 测试 ) 


Progressive Enhancement / Graceful Degradation (渐进 增强 /优雅 降级 ) 
Version Control (e.g. GIT) (版 本 控制 ) 

MVC / MVVM / MV (MV 框架 ) 

Functional Programming (函数 式 编程 ) 

Data Formats (e.g. JSON, XML) (数据 格式 ) 

Data API's (e.g Restful API) (数据 API) 

Web Font Embedding (Web #44 A) 

Scalable Vector Graphics (可 伸缩 向 量 图 形 , 又 称 SVG) 
Regular Expressions (正则 表达 式 ) 

Content Strategy (内 容 策略 ) 

Microdata / Microformats ( 微 数据 / 微 格式 ) 


Task Runners, Build Tools, Process Automation Tools (任务 管道 , 构建 工具 


Responsive Web Design (响应 式 设 计 ) 

Object Oriented Programming (面向 对 象 编程 ) 
Application Architecture (应 用 架构 ) 

Modules (模块 ) 

Dependency Managers (依赖 关系 管理 ) 
Package Managers ( 包 管 理 ) 

JavaScript Animation (JavaScript 动画 ) 

CSS Animation (CSS 动画 ) 

Charts / Graphs (图 表 /图 形 ) 

UI widgets (UI 工 具 集 ) 

Code Quality Testing (代码 质量 测试 ) 

Code Coverage Testing (代码 覆盖 测试 ) 
Code Complexity Analysis (代码 复杂 度 测 试 ) 
Integration Testing (集成 测试 ) 

Command Line / CLI (命令 行 /命令 行 界 面 ) 
Templating Strategies (模板 策略 ) 

Templating Engines (模板 引擎 ) 

Single Page Applications ( 单 页 应 用 ) 

XHR Requests (aka AJAX) (XHR 请 求 , 又 称 AJAX) 
Web/Browser Security (Web/ 浏 览 器 安全 ) 
HTML Semantics (HTML 语义 化 ) 

Browser Developer Tools (浏览 器 开发 者 工具 ) 


译 者 补充 : 


前 端 技能 汇总 
WebFrontEndStack 


, 过 程 自动 化 


前 端 开 发 技术 栈 
YQL/Company Open Platform 
APP Engine/Cloud AI Web 服 务 
Google Open API/Github 


YDN/YUIConf/JSConf 
QCon/Velocity 









D2/WebRebuild 前 沿 技术 社区 /会 议 
NodeParty/HTML5 研 究 小 组 
UED Teams 
jQueryMobile/html5/css3 


iPhone/iPad/iOs/android = 移动 终端 
responsive UI Design 


CSRF/XSS {ee 
ADsafe/Caja/FBJS/Sandbox 





知识 管理 /总 结 分 享 





沟通 技巧 /团队 开发 /需求 管理 /PM 
代码 模块 化 开发 /代码 版 本 管理 
交互 设计 /可 用 性 /可 访问 性 知识 











JSLint/CSSLint/YUICompressor A 





JSMin/TPacker-minifier 
Ant/Make 







jQuery/YUI2/YUI3 
Prototype/Mootools/ExwS 
Smarty/Django/Zend 
YUITest/QUnit/Jasmine 

前 端 测试 /前 端 MVC 





‘ie 





1€6/7/8/9 


Firefox3.6/4/5/6/7/8.，| 浏览 器 兼容 性 
eee Ceg 


HTML 


切 页 面 |- css 
PhotoShop 
JavaScript 





编程 语言 | PHP/Python/Perl/Ruby/BashShell... 
NodeJS/FlashAS 


Firebug/Firebug-lite/Web Inspector 
YSlow/Smushit 
IEDeveloperToolBar/lETester 
SuperPreview/JsBeautifier 
Fiddler/WireShark/tcpdump 


VIM/Aptana/Notepad+ +/EditPlus... 
开发 工具 上 SygWin/svn/git 


编译 原理 /计算 机 网 络 


计算 机 知识 储备 | 司 _ 操 作 系统 /算法 原理 
| 软件 工程 /软件 测试 原理 



















N w3c/DOM/BOM/XHTML/XML/JSON/JSONP 





\ HTMLS/CSS3 


对 前 端 标准 /规范 |=] ECMAScript3/ECMAScript5 


CommonJS/AMD 
HTTP1.1 





WebPageTest 
ShowSlow/YSlow/34Rule 


HttpWatch 
DynaTrace’s Ajax 





编程 知识 储备 


JavaScript 设 计 柑 式 
JavaScripti 
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前 


端 开发 技术 栈 


HTMLS 
CSS3 
ionic 等 相 侨 框架 使 用 
AtomS hell 
Runtime 
Android 
Objective-C 
10s 
Swift 
ReactNative 
Hybrid 
NativeScript 
HE 
Grunt 


Gulp 


Sass 


Angular 
HE 
ES6+ 
Promise 
WebComponents 
其 它 规范 
脚本 
框架 
前 后 端 融合 
D3 
Three 
WebGL 
其 它 
XSS 
CSRF 
RIS DTS 


RBH 


Mobile 开 发 


多 端 开 发 


和 前端 工程 化 


新 方向 等 框架 


未 来 规范 


Node 大 方向 


数据 可 视 化 


前 端 安全 


FT BH FR TC HE HK 


基础 体系 


前 后 端 





WEB 工 程 师 知识 体系 


数据 结构 、 算 法 


TCP/IP 


领域 架构 模型 


后 端 技术 体系 


FF RAH OPT 






REE 


数据 库 以 及 缓存 等 


数据 日 志 分 析 


工具 能 力 提 升 


WebServer 


Lua 
其 它 范式 语言 了 解 
MySQL 
Redis 
其 它 
Kafka 
Strom 
Hadoop , Spark 
REAR 
Vim 
curl 
crontab 
shell 
sed & awk 
finux 原 理 及 周边 技术 积累 
分 布 式 服 务 质 量 监控 


自动 化 运 维 
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前 端 开 发 做 什么 


一 个 前 端 开 发 者 能 在 下 面 的 操作 系统 列 (又 称 : OS) 表 中 之 一 上 手写 运行 在 Web 平 台 (如 : 浏览 
之 上 的 HTML, CSS 和 JS: 


e Windows 

e Windows Phone 
e OSX 

e iOS 

e Android 

e Ubuntu (or Linux) 
e Chromium 


操作 系统 运行 在 下 面 中 的 一 个 或 者 多 个 设备 之 上 : 


e Desktop computer 

e Laptop / Netbook computer 

e Mobile phone 

e Tablet 

e TV 

e Watch 

。 Things (任何 你 能 想到 的 , 汽车 , 冰箱 , 灯光 , 温 控 器 等 ) 


y 


ASTY aes survey 


INTERNET OF THINGS 


& Quantified Self 


connects lighting connects thermostat 
to the Internet to the Internet 


siy 
Q >. 
NE in 2015 in 2015 
w 


technologies 


: Positive attitude 
l towards Internet 
: of Things 


20% 18% : @ 
8% : 


2011 2013 2011 2013 2011 2015 2013 -2015 2013 2015 2015 


DO BA ») 


smartphone tablet mediaplayer laptop Internet on TV 


: Use of apps Sort of apps people will use in 2015 
59% banking / administration : tor measunng 16% 


health/sports 13% 14% 
6% 6% 3% 
38% SS 18-24 35-44 55+ 18-24 35-44 55+ 
25% shopping 
22% news consumption 


health apps sports apps 
一 般 来 说 , 前 端 技术 通过 使 用 下 列 运 行 时 场景 , 能 运行 在 前 面 提 到 的 操作 系统 和 设备 之 上 : 


connected to the Internet 


v 
i 
o 

~ 
is] 

Pd 

七 
四 
v 

S 
> 
v 

D 

— 
° 
v 
wm 

= 


ie “ 
Online monitoring by doctors 


positive attitude 


negative attitude 


The Internet has changed 


life concerning: 
The Internet and health 


concerned about privacy 





。 运行 在 OS 上 的 Web 浏 览 器 (如 : Chrome, IE, Safari, Firefox) 
e 运行 在 OS 上 并 由 CLI 驱动 的 headless 浏 览 器 (如 : plantomJS) 


e 一 个 Web 视 图 /区 入 本 机 程序 的 浏览 器 Tab( 当 做 iframe) 作 为 运行 时 环境 , 作为 与 本 机 API 
通信 的 桥梁 . 典型 的 Web 视 图 应 用 包括 一 个 由 Web 技 术 (HTML, CSS, 和 JS) 构 建 的 Ul.( 如 : 
Apache Cordova, NW.js, Electron) 

e 一 个 由 Web 技 术 创 建 的 本 机 程序 会 在 运行 时 作为 与 本 机 API 通信 的 桥梁 , 被 解释 执行 , UI 
将 使 用 本 机 的 Ul 部 分 (如 : IOS 本 机 控制 ) 而 不 是 Web 技 术 控 制 (NativeScript, React Native). 


团队 中 的 前 端 


在 一 个 设计 和 开发 Web 网 站 , Web 应 用 ,或 者 基于 Web 技 术 的 本 机 应 用 的 团队 , 前 端 开发 者 是 
典型 的 只 有 一 个 人 . (注意 : 构建 一 切 的 开发 者 曾经 被 称 为 "Web 网 管 ", 但 这 些 军 见 的 和 神秘 的 开 
发 人 员 现 在 被 称 为 "全 栈 开发 者 "). 
一 个 构建 专业 的 Web 网 站 或 软件 的 最 小 化 团队 也 应 该 包含 下 列 角色 : 

o 视觉 设计 (字体 , ME, FIE, 视觉 概念 & 主 题 ) 

© Ul/ 交互 设计 /信息 架构 师 (制定 框架 , 指定 所 有 用 户 交 互 , Ul 功能 和 结构 信息 ) 

© 前 端 开发 者 ( 写 能 够 在 客户 端 / 设 备 上 运行 的 代码 ) 

© 后 端 开发 者 ( 写 能 够 在 服务 端 运 行 的 代码 ) 


这 些 角 色 是 根据 技能 的 覆盖 排序 的 (后 面 的 角色 的 技能 会 得 盖 前 面包 i 一 个 前 端 开 发 者 很 擅长 
处 理 Ul/ 交互 设计 , 后 端 开发 者 也 一 样 . 团队 成 员 承 担 多 个 角色 是 很 少见 的 . 


一 个 大 的 团队 可 能 包含 下 列 角 色 , 而 不 是 如 上 面 所 展示 的 : 
。 视觉 设计 
© Ul/ 交 互 设 计 / 信 息 架 构 师 
。 SEO 策略 师 

前 端 开 发 者 

o 开发 - 运 维 工程 师 

e 后 端 开发 者 

© API 开发 者 

© 数据 库 管 理 员 

QA 工程 师 /测试 人 员 


全 才 神 话 





bi 

THE FULL STACK DEVELOPER” 

(no other developers reguved ) 
这 是 个 需要 设计 和 开发 一 个 Web 解决 方案 的 角色 , 不 仅 需 要 有 很 深厚 的 技术 栈 , 而且 需 要 在 视 
觉 设 计 , UN 交互 设计 , 前 端 开 发 和 后 端 开 发 有 大 量 的 经 验 . 任何 可 以 以 一 个 专业 的 水 平 承担 这 4 
个 角色 中 的 一 个 或 多 个 的 人 (又 称 全 才 或 全 栈 开 发 者 ) 是 很 少 的 ， 


务实 一 点 , 你 应 该 寻求, 或 者 雇佣 一 个 在 其 中 一 个 角色 堪 称 专家 的 人 . 那些 声称 在 一 个 或 多 个 负 
色 上 是 专家 的 人 是 非常 罕见 的 ， 
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前 端的 面试 问题 


前 端面 试 
你 可 能 被 问 到 的 问题 : 
。 前 端 工作 面试 问题 
e 前 端 开发 面试 问题 
。 每 个 JavaScript 开发 者 应 该 知道 的 10 个 面试 问题 
。 前 端 测验 


e JavaScript 测验 
你 可 以 问 的 问题 : 

e 一 个 开源 的 开发 人 员 可 以 向 潜在 雇主 提问 的 问题 列表 
译 者 补充 : 


o 前 端 开发 面试 题 大 收集 

。 前 端 开发 面试 问题 及 答案 整理 
。 收集 的 前 端面 试题 和 答案 

e 写 给 前 端面 试 者 

e Awesome Interviews 


前 端 工作 版 块 


前 端 工作 版 块 


可 以 列 出 很 多 寻找 技术 工作 的 方法 . 下 面 的 有 限 列 表 是 和 寻找 一 份 具 体 的 前 端 工作 最 相关 的 资 
产 : 


e frontenddeveloperjob.com 
e authenticjobs.com 

e weworkremotely.com 

e jobs.github.com 

e careers.stackoverflow.com 
e angularjobs.com 

e jobs.emberjs.com 

e jobs.jsninja.com 

e css-tricks.com/jobs 

e glassdoor.com 


译 者 补充 : 


e W3ctech 

e W3cfuns 

。 内 推 网 

e 拉 勾 网 

© 前 端 网 

e CSDN 

。 EM 

e 100Offer 

e SegmentFault 
e 周伯通 

。 博客 园 

e V2EX 

e 简历 模板 

e 面试 问题 1 面试 问题 2 
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前 端 新 次 


在 美国 , 前 端 开 发 者 的 平均 薪资 是 $75K 
一 个 有 经 验 的 前 端 开发 者 可 以 去 任何 想 去 的 地 方 生 活 (远程 工作 ), 并 且 一 年 能 赚 的 钱 超过 
$150k( 访 问 angel.co, 注册 , 查找 超过 $150k 的 前 端 工作 ). 


Front-end developer salary in Chicago, 2015 








ww | OV 


$ USD 
S 
s 


===» high 








Junior Middle Senior 
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如 何 成 为 前 端 开发 者 ? 


GODE 7 DEBUG / TEYE 





那么 , 怎么 才能 成 为 一 个 前 端 开发 者 呢 ? 这 个 问题 很 复杂 , 因为 直到 现在 , 你 也 不 能 去 一 所 大 学 
获得 前 端 工 程 师 的 学 位 , 并 且 我 也 很 少 听 说 或 者 遇见 通过 编写 专业 地 HTML, CSS 和 
JavaScript ee ae 的 计算 机 科学 eee ens 事实 上 , 现在 的 大 部 分 前 端 开 
发 者 都 是 通过 自学 成 为 开发 者 和 没有 经 过 传统 训练 的 程序 员 . 为 什么 会 是 这 种 情况 呢 ? 


前 端 开 发 人 员 不 是 一 个 视觉 设计 师 或 一 个 交互 设计 师 , 设计 学 校 不 是 磨 练 前 端 技 能 的 地 方 ; 前 
端 开发 者 也 不 是 一 个 受过 传统 教育 地 计算 机 科 学 研究 生 , 传统 教育 并 不 专注 于 让 一 个 人 为 前 端 
开发 做 准备 . 实际 上 , 在 美国 的 高 等 教育 系统 中 (例如 大 学 ), 紧 跟 传统 教学 方式 可 能 会 阻碍 一 个 
人 置身 实践 , 而 前 端 开发 最 需要 实际 经 验 . 在 今天 , 如 果 你 想 成 为 一 个 前 端 开发 者 , 你 可 以 自学 
或 者 参加 一 些 不 被 认可 的 项 目 , 课程 , 训练 营 和 班级 . 


前 端 工程 师 会 精巧 地 创建 用 户 界 面 依赖 的 骨架 . 有 时 , 他 们 要 足够 关注 交互 设计 , 因为 他 们 会 纺 
写 UI 交互 的 底层 代码 . 因此 , 现在 的 许多 实践 是 前 端 工 程 师 使 用 编程 技巧 达 不 到 的 , 但 是 , 从 
另 一 个 方面 来 说 , 和 其 它 类 型 程序 员 转 前 端 开发 相 比 , 似乎 有 更 多 的 设计 师 转 前 端 开 发 者 . 当 
然 , 由 于 JavaScript 已 经 成 熟 , 更 多 的 受过 传统 教育 的 程序 员 愿 意 将 他 们 的 知识 带 到 前 端 实践 
中 . 你 可 能 没有 意识 到 前 端 开发 人 员 并 不 总 是 被 认为 是 " 丨 正 的 "程序 员 , 但 是 , 时 代 正 待 正 在 改 


aR 
X. 


正如 所 有 人 说 的 那样 , 我 相信 作为 前 端 开发 人 员 , 职业 生涯 道路 是 一 个 未 知 的 过 程 . 我 能 说 的 
是 , 要 成 为 一 名 前 端 工程 师 , 就 必须 知道 和 在 一 个 高 层次 的 水 平 上 使 用 HTML, CSS 和 
JavaScript, 也 不 会 忽略 交互 设计 或 者 传统 编程 所 应 该 知道 的 技能 . 实际 上 , 从 我 的 经 验 来 看 , 最 


好 的 前 端 开发 者 通常 会 掌握 交互 设计 和 基于 Web 平台 (例如 浏览 器 , HTML, CSS, DOM 和 
JavaScript) 的 编程 . 不 管 出 于 什么 原因 , 还 有 很 多 关于 前 端 开发 的 知识 往往 没 被 发 现 , 也 就 是 
说 , 前端 工程 更 像 一 些 由 自 尝 的 人 组 成 的 实 中 而 不 是 一 个 直接 对 应 有 组 织 和 认可 的 高 等 教育 
的 教 学 重心 的 领域 . 


如 果 我 从 现在 开始 决定 成 为 一 名 前 端 开发 人 员 , 我 会 努力 按照 下 面 所 概括 的 过 程 进行 学 习 . 学 
习 过 程 中 , 我 会 假设 你 是 自己 最 好 的 老师 . 


1. 粗略 了 解 Web 是 怎么 工作 的 , 确保 你 知道 域名 , DNS, URL, HTTP, 网 a, bi 览 器 , 服务 器 / 
服务 托管 , 数据 库 , JSON, API, HTML, CSS DOM 和 JavaScript. 了 解 这 些 的 目的 是 确保 
你 知道 它们 如 何 一 起 工作 以 及 每 部 分 用 于 做 什么 . 专注 于 高 水 平 的 ‘ae 架构 概述 . 从 简单 
的 网 页 制作 开始 , 并 简单 学 习 一 下 本 机 Web 应 用 (又 称 SPA). 


2. 学 习 HTML, CSS, 可 访问 性 和 SEO. 

3， 学 习 UI 设计 模式 的 基本 原理 , 交互 设计 , 用 户 体 验 设 计 和 可 用 性 
4. 学习 编程 的 基本 原理 

5. 学 习 JavaScript 

6. 学 习 JSON 和 API 

7. 学 习 CLI/ 命 令 # 


8， 学 习 软 件 工程 实践 (如 : 应 用 设计 /架构 , 模板 , Git, 测试 , 监控 , 自动 化 , 代码 质量 , 开发 方法 
学 ) 


9. 定制 自己 的 工具 箱 
10. #4 Node.js 


当前 端的 HTML/CSS 开发 者 和 前 端 应 用 /JavaScript FAA PAN, 你 就 快要 结束 这 个 学 习 过 
程 . 


关于 学 习 的 一 个 简短 建议 : 在 学 习 抽象 的 技术 之 前 , 先 学 习 实 际 的 底层 技术 . AF DOM, 再 学 
JQuery; 先 学 CSS, 再 学 SASS; 先 学 HTML, 再 学 HAML; 先 学 JavaScript, 再 学 coffeeScript; 
先 学 ES6 模板 字符 串 , 再 学 Handlebars; 先 学 Ul 模式 , 再 学 Bootstrap. 当 你 开始 学 习 时 , 你 应 
该 会 害怕 事情 隐藏 的 复杂 性 . Abstracts in the wrong hands can give the appearance of 
advanced skills, while all the time hiding the fact that a developer has an inferior 
understanding of the basics or underlying concepts. 


正如 我 之 前 所 建议 的 学 习 过 程 , 这 本 书 的 剩 下 部 分 为 读者 指明 学 习 资 源 和 工具 . 这 也 假设 你 不 
仅 要 学 习 , 而 且 会 将 你 所 学 到 的 知识 和 工具 用 于 实践 .一 些 人 认为 只 实践 , 而 其 他 人 则 建议 只 学 
J, 我 建议 你 结合 二 者 , 找到 适合 自己 的 方式 , 但 是 一 定 要 结合 学 习 和 实践 ! 因而 不 仅 要 阅读 这 
本 书 ,而且 要 实践 . 学 习 , 实践 , 学 习 , 实践 . 重复 执行 是 因为 事情 变化 太 快 , 这 就 是 为 什么 学 习 技 
术 的 基本 原理 , 而 不 是 抽象 的 技术 是 如 此 重要 . 


我 在 前 文 已 经 提 到 , 现在 涌现 出 很 多 的 非 认证 的 前 端 编 码 教育 /训练 营 , 这 些 成 为 前 端 开发 者 的 
途径 也 是 由 老师 在 课室 ( 庚 拟 和 实体 ) 指 导 的 课程 , 遵循 了 从 官方 体系 (如 : 教学 大 纲 , 测验 , 小 测 
KR, RA, 团队 项 目 , 成 绩 等 ) 学 习 的 传统 风格 , 我 在 这 本 书 的 学 习 指 导 部 分 提 到 了 更 多 关于 这 方 
面 的 东西 . 简单 地 说 , Web 上 有 一 切 你 需要 学 习 的 东西 (几乎 没有 成 本 ), 然后 , 如 果 你 需要 有 人 
告诉 你 如 何 获取 站 正 免费 的 东西 ,并且 对 你 的 学 习 负 责 , 你 可 以 考虑 一 个 有 组 织 的 课程 . 关于 其 
他 方面 , 我 不 知道 其 他 任何 职业 可 以 通过 互联 网 连接 和 对 知识 的 强烈 愿望 来 免费 获取 要 学 习 的 
东西 . 


如 果 你 要 马上 开始 学 习 ,我 建议 你 看 看 下 面 一 些 关 于 前 端 开发 实践 的 概述 : 


e 前 端 指 南 [read] 

e 成 为 Web 开发 者 [read] 

e Isobar 前 端 代码 标准 [read] 
。 Web 基本 原理 [read] 

e 前 端 课程 [read] 
freeCodeCamp [interact] 


Planing a Front-end JS Application [watch] 

e So, You Want to be a Front-end Engineer [watch] 

Front End Web Development Career Kickstart [watch][$] 
© 前 端 Web 开发 入 门 [watch][$] 

Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch][$] 
e Web 开发 介绍 [watch][$] 

e iT Web 开发 基本 原理 [watch][$] 

Lean Front-End Engineering [watch][$] 

A Baseline for Front-End [JS] Developers: 2015 [read] 

。 J als Web 开发 [watch][$] 

© 前 端 开发 精通 [watch][$] 

e 没有 学 位 的 前 端 Web 开发 者 [watch][$] 


译 者 补充 : 


© 成 为 一 名 优秀 的 Web 前 端 开发 者 
e What makes a good front end engineer? 
e How to become a web developer 


NO 


第 二 部 分 为 成 为 一 个 前 端 开发 者 提供 自主 学 习 和 指导 学 习 的 资源 . 


注意 , 仅 需要 学 习 被 列举 出 的 资源 , 或 者 一 个 类 别 的 学 习 记 录 , 因为 我 不 建议 一 个 前 端 开 发 人 员 
学 习 所 有 东西 , LEROY, 选择 自己 行业 内 的 专业 知识 , 我 会 尽 可 能 让 你 掌握 它 . 


译 者 补充 : 


© 前 端 开发 笔记 本 

© 前 端 开发 规范 

© 适用 于 小 团队 的 前 端 规范 

© 无 线 Web 开发 浅 谈 

o 如 何 跟 上 前 端 开发 的 最 新 前 沿 
e Engineering Blogs 

。 大 前 端 工具 集 

。 前 端 收集 

e Front-end Dev Bookmarks 

e Github 资源 收集 

。 github 上 值得 关注 的 前 端 项 目 
© 前 端 人 的 俱乐部 


AS 


这 个 部 分 集中 于 个 人 能 用 来 指导 自己 作为 前 端 开 发 者 的 学 习 进 度 的 免费 和 付费 资源 (视频 训练 ， 
书籍 等 等 )， 


逢 等 
这 些 资源 包括 免费 的 和 付费 的 , 付费 的 资源 是 以 美元 为 单位 结 彰 的 . 


作者 认为 ,任何 有 着 正确 的 决心 和 奉献 精神 的 人 都 能 教 自己 如 何 成 为 一 个 前 端 开 发 者 , 除了 一 
台 能 连接 到 Web 的 电脑 和 用 于 付费 视频 训练 , 书籍 的 现金 , 其 它 都 不 需要 . 


下 面 是 一 些 我 通常 推荐 的 视频 学 习 资料 (专注 技术 ) 


e Frontend Masters 
e pluralsight.com 

e tutsplus.com 

e lynda.com 

e treehouse 

e mijingo 

e codeschool.com 
e laracasts 

e eventedmind.com 
e egghead.io 

e codecademy.com 
e Khan Academy 
e Tagtree 

e Udacity [careful, quality varies] 


译 者 补充 : 


© 号 称 最 全 前 端 开 发 学 习 资 源 ~~ 学 下 来 能 上 天 了 
。 国外 有 哪些 高 质量 js 技术 博客 ? 

e 你 经 常 访问 的 技术 社区 或 者 技术 博客 (IT 类 ) 有 哪些 ? 
© 国外 的 前 端 开发 社区 有 哪些 

e 前 端 开发 初学 书籍 推荐 

e MDN Web 技术 文档 

e MSDN Web 

e SegmentFault 

© 前 端 范 

e w3cplus 

e w3ctech 

e w3cfuns 

e w3help 


自主 学 习 


jobbole 

div.io 

v2ex 

CSDN 

cnblogs 

博客 园 知 识 库 

前 端 乱 炖 

RRM 

极 客 学 院 

网 易 云 课堂 

The State of Web Type 
Frontend Dev Bookmarks 
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Internet/Web 


Internet/web 


互联 网 使 用 网 络 协议 套件 (TCP /1P) 链 接 全 球 数 十 亿 的 设备 , 是 一 个 从 区 域 到 全 球 , 由 数 以 
百 万 计 的 私人 , DH, 学 术 , 商业 , 和 政府 网 络 组 成 的 全 球 性 网 络 系统 , 并 通过 一 系列 广泛 的 
电子 , 无 线 , 光纤 网 络 技术 相互 链接 . 互联 网 提供 了 广泛 的 信息 资源 和 服务 , 如 早期 的 超 文 

本 文档 和 应 用 万 维 网 (WWW), 电子 邮件 , 电话 和 点 对 点 文件 共享 网 络 . - wikipedia 


e WHAT IS THE INTERNET? or, "You Say Tomato, | Say TCP/IP" [read] 
e How does the Internet work [read] 

e How Does the Internet Work?" [read] 

e How Does the Internet Work?" [read] 

e How does the Internet Work? [read] 

e How the Internet Works in 5 Minutes [watch] 

e How The Web Works [watch][$] 

e How the Internet Works [watch] 
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web 浏览 器 (通常 被 称 为 浏览 器 ) 是 一 个 用 于 检索 、 nn 
件 应 用 程序 . 信息 资源 被 定义 成 纳 Ba 它 可 能 

者 一 个 内 容 片 断 . 超 链接 的 ee 能 轻 术 A 览 器 ice ene at rm, 
主要 是 为 了 使 用 万 维 网 , 但 它们 还 
文件 在 文件 系统 . - Wikipedia 


主流 的 浏览 器 如 下 : 


Chrome (引擎: Blink + V8) 

Firefox (4] #: Gecko + SpiderMonkey) 
Internet Exploere (4] #: Trident + Chakra) 
Safari (引擎 : Webkit + SquirrelFish) 


FON = 


StatCounter Global Stats 


Ht TR AY AK 


es o 


Top 12 Browser Versions Combining Chrome and Firefox (5+) from Aug 2014 to Aug 2015 





Chrome (all) 


Firefox 5+ 


IE 11.0 


Android 0 


iPhone 0 


Safari iPad 


Opera 0 


IE 8.0 


IE 9.0 


IE 10.0 


Safari 8.0 


Opera 15+ 


Other 


42.64% 








0% 


浏览 器 和 web 技 术 的 演变 (API 等 ): 


e Www.evolutionoftheweb.com [read] 
e Timeline of web browsers [read] 


最 常用 的 无 党 浏览 器 : 


e PhantomJS (4] #: Webkit + SquirrelFish) 
e slimerjs (引擎 : Gecko + SpiderMonkey) 
e TrifleJS (4] #: Trident + Chakra) 





50% 
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© 我 所 知道 的 关于 浏览 器 和 Web 的 20 件 事 [read] 

。 浏览 器 如 何 工作 的 : 现代 浏览 器 背后 的 秘密 [read] 
e 快速 CSS: 浏览 器 是 怎么 组 织 网 页 的 [read] 

。 浏览 器 是 如 何 演 eee. [watch] 








Browser engine U A 
r 


Rendering engine | 
| JavaScript | 
Interpreter i UI Backend 


。 网 站 性 能 优化 [watch] 
。 浏览 器 泻 染 优化 [watch] 














浏览 器 优化 


Ww g 


浏览 器 安全 


e 浏览 器 安全 手册 [read] 

。 HTML5 Re [read] 

e 亲 端 安全 [watch] 

e Web <4: JavaScript, HTML, CSS 的 使 用 [read][$] 
e 网 络 混战 :现代 Web 应 用 安全 指南 [read] 


浏览 览 器 器 比较 
e Web 浏览 器 的 比较 [read] 
浏览 We ES 器 的 发 展 


在 过 去 , 前 端 开 发 者 会 花费 大 量 的 时 间 让 代码 在 不 同 的 浏览 器 中 正常 工作 . 除非 你 必须 写 出 兼 
容 老 版 本 浏览 器 的 代码 (如 : IE6/IE7), 否则 跟 现在 比 起 来 , 这 (浏览 器 兼容 ) 在 以 前 是 一 个 很 大 的 
问题 . 虽说 浏览 器 兼容 问题 现在 仍然 存在 , 但 前 端 开 发 者 并 不 用 花费 很 多 时 间 就 能 处 理 这 类 问 


35 


We 


题 . 而 实际 上 , 现代 抽 离 出 的 框架 (如 : JQuery, pre-processors, transpilers) 已 经 废除 了 很 多 浏览 
器 不 一 致 问题 . 


绿色 浏览 器 


浏览 器 的 最 新 版 本 被 认为 是 绿色 浏览 器 , 也 就 是 说 , 浏览 器 会 自动 更 新 而 不 用 去 提示 用 户 更 新 . 
济 器 的 自动 更 新 握 弃 了 老 版 本 浏览 器 进程 缓慢 的 问题 , 因为 对 于 老 版 本 浏览 器 和 现代 浏览 器 
辣 的 共性 的 差异 化 开发 是 很 复杂 的 (如 : 新 规范 和 更 新 速度 ). 


I 


浏览 器 选择 


Ww Be 


现在 大 多 数 前 端 开 发 者 使 用 Chrome, "Chrome 开发 工具 "对 开发 者 很 有 用 , 然而 , 所 有 浏览 器 
2 所 以 选择 一 个 开发 用 的 浏览 器 是 一 个 主观 的 问题 . 更 重要 的 问题 是 要 了 
oe A 览 器 , 当 你 在 开发 的 时 候 , 要 在 每 个 浏览 器 中 做 测试 , 但 无 论 选择 哪 一 款 浏览 
都 能 完成 开发 任务 , 我 建议 使 用 Chrome 是 因为 Chrome 开发 工具 一 直 在 改进 , 并 且 和 包含 了 
更 健 全 地 特性 


We 


浏览 器 Hacks 


e browserhacks.com [read] 


DNS 


域名 系统 (又 称 DNS) 


对 于 个 人 电脑 、 器 或 连接 到 互联 网 任何 资源 , 或 专用 网 络 而 言 , 域名 系统 (DNS) 是 一 
个 分 层 分 布 式 命名 系统 , 用 给 每 个 参与 的 实体 分 配 域 名 的 方式 将 各 种 信息 联系 起 来 , 更 重 
要 的 是 ,为 PE DNS 将 所 需 的 数字 IP 地 址 转变 为 人 类 容 多 
记 住 的 域名 . DNS 是 大 多 数 互 联网 服务 的 必要 功能 , 因为 这 是 主要 的 IP 地 址 服务 . - 
wikipedia 


Where is x.com? If your ISP name server doesn’t know, 


Browser asks your it then asks the root name server 
ISP name server for where to find the authoratative name 
( 一 the domain’s IP server for the domain. 


address. | 


| 2 
(ay 


Browser ISP Root 
Machine Name Servers Name Servers 
Pá The ISP name server then The ISP name server then 
i sends the IP address back to asks for the IP address 
x.com’s Browser the browser. from the authoratative 
website uses IP to name server. 
server request 
sends web web page 
pase to from 
anaes ere The authoratative name 
WeDerte server then sends the IP 
server, address back to the ISP 
name server. 2 


7 4 





Q 
Website 
Server 


Authoratative 
Name Servers 


e 什么 是 DNS [watch] 
e DNS 是 怎么 工作 的 ? [read] 


HTTP/ 网 络 


HTTP/ 网 络 ( 包 括 CORS 和 WebSockets) 


HTTP, The Hypertext Transfer Protocol, 即 超 文 本 传输 协议 , 是 一 个 用 于 分 布 式 , 协作 和 
超 媒 体 信 息 系 统 的 应 用 协议 , 是 WWW 数据 通信 的 基础 . - Wikipedia 


CORS, Cross-origin resource sharing, 即 跨 域 资源 共享 , 是 一 种 允许 网 页 上 受 限制 的 资源 
(如 : 字体 ) 可 以 从 该 资源 所 在 域 之 外 的 另 一 个 域 被 请 求 . -Wikipedia 


WebSockets, WebSocket 是 一 种 协议 , 提供 了 在 一 个 TCP 连接 上 进行 全 双 工 通信 的 渠 
道 . 在 2011 $, IETF 将 WebSocket 协议 标准 化 为 RFC 6455, 并 且 W3C 正在 标准 化 
Web IDL 的 WebSocket API. - Wikipedia 


HTTP 


。 HTTP: 每 个 Web 开发 者 必须 知 
。 HTTP: 每 个 Web 开发 者 必须 知 
e HTTP 基本 原理 [watch][$] 

e HTTP 浅 谈 [read] 

。 高 性 能 网 络 浏览 ; 每 个 Web 开发 人 员 都 应 该 了 解 网 络 和 网 络 性 能 [read] 


的 协议 (一 ) [read] 


首 
道 的 协议 (二 ) [read] 


CORS 


。 60 秒 内 的 HTTP 状态 码 变化 [watch] 
。 HTTP 访问 控制 (CORS) [read] 
e CORS 实战 [read][$] 


WebSockets 


e WebSocket: 轻 量 级 的 C/S 通信 [read][$] 
e WebSocket 协议 [read] 
e 用 WebSockets 连接 Web [watch] 


译 者 补充 : 


e HTTP/2 资料 汇总 

e HTTP 权威 指南 [read][RMB] 
。 图 解 HTTP [read][RMB] 
图 解 TCP/IP [read][RMB] 


Web 主机 


Web 主机 
Web 主机 是 一 种 网 络 托 管 服务 , 允许 万 维 网 访问 个 人 和 组 织 他 们 的 网 站 , 由 拥有 服务 器 的 


企业 提供 空间 , 或 者 租赁 给 客户 使 用 , 并 提供 网 络 连接 . Web 主机 也 能 提供 数据 中 心 空 间 
和 连接 到 互联 网 上 位 于 数据 中 心 的 其 他 服务 器 , 称 为 主机 托管 . wikipedia 


aa You Website Vistiors 
Upload your files to 
a web host 





i YourDomain-Name.com 


Web Host Visitors type in your 
website URL 


通用 知识 


e Web Hosting Beginner Guide [read] 
e Web Hosting For Dummies [read][$] 
e Ultimate Guide to Web Hosting [read] 
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前 端 开发 综合 学 习 
入 门 学 习 : 


e 前 端 参 考 指南 [read] 

e Web 开发 者 [read] 

© 前 端 代码 标准 [read] 

e Web 基本 原理 [read] 

© 前 端 课程 [read] 

e FreeCodeCamp [interact] 

。 开发 前 端 JS 应 用 [watch] 

e 前 端 工程 师 [watch] 

© Web 前 端 开发 的 工作 内 容 [watch][$] 
e Web 前 端 开发 入 门 [watch][$] 





e 用 HTML5, CSS, 和 JavaScript 快速 进行 Web 前 端 开 发 [watch][$] 


e Web 开发 介绍 [watch][$] 

e Web 前 端 开发 基础 [watch][$] 

e 精益 前 端 工程 [watch][$] 

© 前 端 (JS) 开 发 基线 : 2015 [read] 

© Web 前 端 开发 入 门 学 习 [watch][$] 

e Web 前 端 开 发 进 阶 学 习 [watch][$] 

e 没有 学 位 的 Web 前 端 开 发 者 [watch][$ 


前 端 简报 , 资讯 和 博客 : 


e shoptalkshow.com 

e frontendfront.com 

e webtoolsweekly.com 

e O'Reilly Web Platform Radar 
e The Web Platform Podcast 

e The Web Ahead 

e The Big Web Show 

e Fresh Brewed Frontend 

e Mobile Web Weekly 

e Open Web Platform Daily Digest 
e FRONT-END DEV weekly 


译 者 补充 : 


e 前 端 工程 系列 文章 
o 前 端 知识 体系 


。 前 端 资源 大 总 结 
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前 端 入 门 

WebPlatForm 

前 端 开发 规范 手册 

Web 开发 电子 书 下 载 ( 英 ) 

对 前 端 开发 者 有 用 的 文档 和 指南 : 1 23456 


41 


用 户 界面 和 交互 设计 


用 户 界 面 和 交互 设计 


用 户 界面 设计 : 用 户 界面 设计 (UI) 或 用 户 界面 工程 师 是 为 机 器 或 者 软件 做 用 户 界面 设计 的 ， 
如 : 计算 机 , 家 用 器 具 , 移动 设备 和 其 它 电子 设备 , 专注 于 最 大 限度 地 提高 用 户 体 验 . APR 
面 设计 的 目标 是 尺 可 能 是 使 用 户 交互 变 得 简单 有 效 , 实现 用 户 的 操作 目标 (设计 是 以 用 户 

为 中 心 的 ). - wikipedia 

交互 设计 模式 : 设计 模式 是 一 种 记录 解决 常见 设计 问题 解决 方案 的 形式 化 方式 . 建筑 师 
Christopher Alexander 在 城市 规划 和 建设 体系 结构 中 已 经 介绍 了 这 种 方式 , 并 已 用 于 其 他 
学 科 , 包括 教学 , 教育 学 和 软件 架构 和 设计 . - wikipedia 

用 户 体验 设计 : 用 户 体验 设计 (又 称 UXD 或 UED 或 XD), 是 通过 提高 可 用 性 、 可 访问 性 
以 及 在 用 户 跟 产 品 交 互 时 的 愉悦 来 提高 用 户 体验 的 过 程 .用户 体验 设计 从 完成 传统 的 人 机 
交互 (HCl), 已 经 扩展 到 要 处 理 产 品 或 服务 中 能 被 用 户 感 知 的 所 有 方面 . - wikipedia 


人 机 交互 : 人 机 交互 (HCI) 不 仅 特别 关注 人 和 计算 之 间 的 界面 , 也 会 研究 设计 和 使 用 Web 
技术 . 人 机 交互 领域 的 研究 人 员 都 会 去 关注 当前 人 类 与 计算 机 交互 的 方式 和 为 人 类 与 计算 
机 提供 新 的 交互 方式 的 设计 技术 . - wikipedia 


若 你 想 要 建立 适当 的 用 户 界 面 , 我 会 建议 你 阅读 以 下 关于 设计 方面 的 书籍 : 


e Designing Interfaces [read][$] 
e About Face: The Essentials of Interaction Design [read][$] 
e Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability [read][$] 


译 者 补充 : 


e 简约 至 上 :交互 式 设计 四 策略 [read][RMB] 
e 交互 设计 沉思 录 [read][RMB] 
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HTML & CSS 


HTML & CSS 


HTML - 超 文 本 标记 语言 , 通常 被 称 为 HTML, 是 被 用 于 创建 网 页 的 标准 标记 语言 . Web 浏 
览 器 能 将 HTML 文件 泻 业 成 可 见 的 或 者 可 听 到 的 . HTML 随 着 线索 提示 , 语义 化 地 描述 了 
网 站 的 结构 , 使 它 成 为 一 种 标记 语言 , 而 不 是 编程 语言 . - wikipedia.org 


CSS - 层 生 式样 式 表 (CSS) 是 用 于 描述 外 观 和 格式 化 标记 语言 编写 的 文档 的 样式 表 语 言 . 
尽管 经 常 被 用 来 改变 用 HTML 和 XHTML 编写 的 网 页 和 用 户 界面 的 样式 , 但 也 可 用 于 任何 
XML 文档 , 包括 纯 XML, SVG 和 XUL. 跟 JavaScript 和 HTML 一 样 , CSS 是 被 大 多 数 网 
站 用 于 为 Web 应 用 程序 创建 富有 吸引 力 的 网 页 , 用 户 界面 的 一 种 基础 技术 , 也 为 许多 移动 
应 用 程序 创建 用 户 界 面 . - wikipedia.org 


就 像 建造 房子 , 你 可 以 认为 HTML 是 骨架 , 而 CSS 是 油漆 和 装饰 . 
入 门 学 习 : 


e codecademy.com HTML & CSS [interact] 

。 HTML/CSS 介绍 : 网 页 制作 [watch] 

e HTML & CSS 编码 学 习 [read] 

e CSS 布局 [read] 

e Web 前 端 开发 入 门 [watch][$] 

。 HTML & CSS 设计 与 构建 网 站 [read][RMB] 
e 快速 使 用 HTML5, CSS 3 & JavaScript 进行 Web 前 端 开 发 [watch][$] 
。 深入 理解 HTML: 语义 , 标准 与 样式 [read][$] 
。 CSS 定位 [watch][$] 

。 HTML 文档 流 [watch][$] 

e HTML5 & CSS3 介绍 [watch][$] 

e CSS 中 的 绝对 居中 [read] 

e CSS #78 #! [watch] 

e HTML 表单 结构 [watch] 

。 HTML 语义 化 : 如 何 构建 Web 页 面 [watch] 


进 阶 学 习 : 


e 从 CSS1 到 CSS 4 的 选择 器 参考 [read] 
e CSS Diner [interact] 

e 深入 理解 CSS3 [watch][$] 

e atozcss.com/ [watch] 

e Flexbox 完全 指南 [read] 


参考 /文档 : 


e htmlelement.info 
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HTML & CSS 


e MDN CSS reference 

e MDN HTML element reference 

e cssvalues.com/ 

e CSS TRIGGERS...A GAME OF LAYOUT, PAINT, AND COMPOSITE 
e HTML attributes reference 


术语 表 : 


© HTML 元 素 编程 术语 参考 
© CSS 属性 和 选择 器 编程 术语 参考 


标准 /规范 : 


e W3C HTML5 标准 : WWW 核心 语言 的 第 五 个 主要 版 本 
e HTML 元 素 在 线 标 准 

e HTML 语法 

e W3C HTML 规范 

© 全 局 属性 

。 CSS 2.2 规范 

e CSS 3 选择 器 

e W3C CSS 规范 


CSS 架构 设计 : 


e OOCSS [read] 

e SMACSS [read][$] 
e SMACSS [watch][$] 
e Atomic Design [read] 


编写 规范 : 


e CSS 通用 编写 规范 [read] 

o 开发 灵活 的 , 持久 的 和 可 持续 的 HTML 和 CSS 的 标准 [read] 
e cssguidelin.es [read] 

。 谷歌 的 HTML/CSS 编程 风格 指南 


HTML/CSS 简报 : 


e HTML 5 Weekly 
e CSS Weekly 
译 者 补充 : 


e CSS 3 教程 
。 HTML& CSS 测试 
e Pro HTML5 Programming 


HTML & CSS 


e Pro CSS3 Animation 

e CSS Protips 

e 精通 CSS: 高 级 Web 标 准 解决 方案 
© 高 流量 网 站 CSS 开 发 技术 

。 深入 理解 HTML5: 语义 , 标准 与 样式 
e HTML 5 与 CSS 3 权威 指南 
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SEO 


SEO: 搜索 引擎 优化 


a ERY, 影响 一 个 网 站 或 者 网 页 可 见 性 的 过 程 . 一 般 
来 说 , 越 靠 前 出 现 (或 在 搜索 结果 页 中 权重 高 的 网 页 ) 的 网 页 , 和 频繁 出 现在 搜索 结果 列表 中 
的 网 站 ， in 擎 的 用 户 . SEO 会 定位 于 不 同类 型 的 搜索 , 包括 图 片 搜 
R, 本 地 搜索 , 视频 搜索 , 学 术 搜 索 , 新 闻 搜 索 和 特定 行业 的 重 直 搜索 引擎 . - wikipedia 


综合 学 习 : 


e David Booth: SEO 基本 原理 [watch][$] 
e Paul Wilson: SEO 基本 原理 [watch][$] 
e SEO: Web 设计 者 [watch][$] 

© 谷歌 搜索 引擎 优化 指南 [read] 

e SEO 优化 指导 [read] 
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JavaScript 


JavaScript 


JavaScript 是 一 种 高 级 的 , 动态 的 , 无 类 型 的 和 解释 型 的 编程 语言 , 它 已 经 在 ECMAScript 
语言 规范 中 被 标准 化 . 跟 HTML 和 CSS 一 样 , JavaScript 是 WWW 内 容 生成 的 第 三 种 必 
不 可 少 的 技术 ; 大 多 数 的 网 会 使 用 Javascript, 并 且 有 览 器 支 
持 . JavaScript 基于 原型 和 部 数 优 先 的 特点 , 使 它 成 为 多 范 型 的 语言 , 支持 面向 对 象 的 , 命 

令 式 的 , 和 函数 式 编程 风格 . JavaScript 能 提供 API ae ke 日 期 和 正则 ve 
但 不 包括 任何 VO, 如 网 络 , 存储 或 图 形 工具 , 对 这 些 的 依赖 取决 于 宿主 环境 中 散 入 了 什么 

- Wikipedia.org 


入 门 学 习 : 


e https://www. SoUcear omy com/en/tracks/javascript [interact] 

e JavaScript 高 级 程序 设计 [read][RMB] 

e JavaScript Enlightenment [read] 

e JavaScript 面 向 对 和 象 精 要 [read][RMB] 

e Speaking JavaScript [read] 

e 你 不 知道 的 JavaScript [read] 

e 理解 ECMAScript 6 [read] 

e JavaScript 模式 [read][RMB] 

e JS.Next: ES6 [watch][$] 

e Crockford on JavaScript - Volume 1: The Early Years [watch] 

e Crockford on JavaScript - Chapter 2: And Then There Was JavaScript [watch] 
e Crockford on JavaScript - Act Ill: Function the Ultimate [watch] 

e Crockford on JavaScript - Episode IV: The Metamorphosis of Ajax [watch] 
e Crockford on JavaScript - Part 5: The End of All Things [watch] 

e Crockford on JavaScript - Scene 6: Loopage [watch] 

e JavaScript 72% [read] 


进 阶 学 习 : 


e JavaScript 函数 式 编程 [read][RMB] 

e ECMA-262 by Dmitry Soshnikov [read] 
e JavaScript 进 阶 [watch][$] 

e JavaScript 语言 精粹 [read][RMB] 

e 你 不 知道 的 JS: 作用 域 & A E [read] 

e 你 不 知道 的 JS: this & 原型 [read] 

。 你 不 知道 的 JS: 数据 类 型 & 语法 [read] 
e 你 不 知道 的 JS: 异步 & 性 能 [read] 

e 你 不 知道 的 JS: ES6 & Beyond [read] 
e Eloquent JavaScript [read] 
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JavaScript 


e 测试 驱动 的 JavaScript 开发 [read][RMB] 
JavaScript Allonge [read][$] 

e JavaScript With Promises [read][$] 

e 高 性 能 JavaScript [read][$] 

e JavaScript 正则 表达 式 入 门 [read] 

e 正则 表达 式 使 用 [watch][$] 


参考 /文档 : 
e MDN JavaScript reference 
术语 表 / 百 科 全 书 : 


e JavaScript 术语 表 
e JavaScript 百科 全 书 


标准 /规范 : 


e ECMAScript® 2015 语言 规范 
e ECMA262 的 状态 , 进度 和 文档 


ak 


编程 规范 : 


e Node.js 风格 指南 
e JavaScript 开发 原则 
e Airbnb JavaScript 风格 指南 


JavaScript 简报 , 新 闻 和 播客 : 


e JavaScript Jabber 
e JavaScript Weekly 
e Echo JS 
JavaScript Kicks 
javascript.com 

e FiveJS 

e JavaScript Live 


译 者 补充 : 


e 重新 认识 JavaScript 

e JavaScript 标准 参考 教程 

e JavaScript 秘密 花 

浅 谈 JavaScript 系 列 

深入 理解 JavaScript 系 列 
JavaScript Promise 迷你 书 
e 学 用 JavaScript 设计 模式 


JavaScript 


ES 6 入 门 (中 文 ) 

ES 6 入 门 (英文 ) 

ES 6 In Depth 系列 

ES6 Overview in 350 Bullet Points 

JS The Right Way 

JavaScript 新 手 教程 

JavaScript 进 阶 教程 

外 优秀 JavaScript 资源 推荐 
awesome-javascript1 awesome-javascript2 
JavaScript 免费 编程 电子 书 索引 (中 文 ) 
JavaScript : 40+ 基 本 的 Web 开发 工具 
JavaScript Puzzlers 

JavaScript Test 

Awesome JavaScript-CN 
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Web 动画 


N 


宗 合 学 习 : 


Web 动画 的 历史 [watch][$] 

Snap.svg 动画 [watch][$] 

CSS3 和 HTML5 动画 [watch][$] 

监 实 世界 中 的 CSS 动画 [watch][$] 

HTML5+JavaScript 动画 基础 [read][RMB] 

Web Animation using JavaScript: Develop & Design (Develop and Design) [read][$] 
2014: 动画 发 展现 状 [read] 

学 会 用 CSS 创建 动画 [read & watch] 

学 会 用 JavaScript 创建 动画 [read & watch] 


标准 /规范 


Web 动画 


译 者 补充 : 


Pro CSS3 Animation 
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DOM, BOM & JQuery 


DOM, BOM & JQuery 


DOM - 文档 对 象 模型 (DOM) 用 于 代表 和 对 象 交 互 的 HTML, XHTML 和 XML 文档 , 是 一 种 


跨 平 台 和 语言 无 关 性 的 约定 . 每 一 份 文档 的 所 有 节点 被 组 织 成 一 种 树 结构 , FRA DOM 树 . 


DOM 对 象 通过 使 用 对 得 上 的 方法 被 处 理 和 操作 , 一 个 DOM 对 象 的 公共 接口 被 指定 为 它 
的 应 用 程序 编程 接口 (API). - wikipedia.org 


BOM - 浏览 器 对 象 模型 (BOM) 是 一 种 浏览 器 规范 , 代 指 Web 浏览 器 暴露 出 的 对 象 . 与 文 
档 对 象 模型 不 同 的 是 , 目前 并 没有 关于 浏览 器 天 ues 的 标准 和 严格 定义 , 因而 浏览 器 厂 
商 可 以 按照 他 们 的 意愿 , 采取 任何 方式 来 实现 BOM. - wikipedia.org 


a. kk 


JQuery - JQuery 是 一 个 跨 平台 的 JavaScript #, 其 设计 目的 是 简化 客户 端的 HTML W 
本 操作 . JQuery 也 是 目前 最 流行 的 JavaScript È, 在 目前 排名 前 1000 万 的 网 站 中 , 65% 
的 网 站 安装 了 JQuery. JQuery 是 免费 的 , 基于 MIT 协议 的 开源 软件 . - wikipedia.org 


最 理想 但 又 难度 最 大 的 学 习 路 径 就 是 首先 学 习 JavaScript, 然后 学 习 DOM, 之 后 再 学 习 


JQuery. 然后 , 完全 可 以 按照 你 所 想 的 学 习 路 径 来 安排 学 习 的 顺序 . 大 多 数 的 前 端 开发 者 在 了 解 


JavaScript 和 DOM 之 后 , 才 会 接触 JQuery. 无 论 采 取 什 么 学 习 路 径 , 都 要 确保 JavaScript, 
DOM 或 者 JQuery 不 要 成 为 " 黑 盒 子 ". 


入 门 学 习 : 


e DOM [read] 

° EGR com jQuery [watch] 
e jQuery È % [read] 

e JQuery A!) [watch][$] 


进 阶 学 习 : 


。 DOM 启蒙 [read][RMB] 或 免费 在 线 阅 读 

。 JS & DOM 进 阶 [watch][$] 

© DOM 进 阶 ; 动态 网 页 设计 技术 [read][$] 

e 常见 JQuery bugs 修复 [watch][$] 

e JQuery 技巧 [watch][$] 

e jQuery-free JavaScript [watch][$] 

e Douglas Crockford: DOM 理论 -- 不 可 忽视 的 API [watch] 


参考 /文档 : 


。 MDN: 文档 对 象 模型 
e MDN: 事件 参考 

e JQuery 文档 

e MDN: 浏览 器 对 象 模型 
e MSDN: 文档 对 象 模 型 
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DOM, BOM & JQuery 


标准 和 规范 : 


e W3C DOM4 

。 DOM 在 线 标准 
。 DOM 3 事件 规范 
。 DOM 技术 报告 
译 者 补充 : 


e You Might Not Need JQuery( 英 ) 中 文 版 
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Web 字体 


Web 字体 & 图 标 


Web 字体 是 指 在 WWW 上 使 用 的 字体 . 当 HTML 文档 第 一 次 被 创建 时 , 字体 风格 和 样式 
ae Web 浏览 器 的 设置 所 控制 , 因为 直到 1995 年 网 景 介 绍 了 <font> 标记 之 前 , 个 

页 没有 控制 字体 显示 的 方式 , 而 <font> 标记 在 HTML 3.2 规范 中 被 标准 化 . 然而 , 被 
o 定 的 字体 必须 安装 在 用 户 的 电脑 上 , 或 者 是 一 种 可 以 依赖 的 字体 , 如 : 浏览 器 默认 的 
sans-serif 字体 或 monospace 字体 . 在 1996 年 发 布 的 CSS 1.0 规范 也 提供 指定 使 用 字 
体 的 功能 


en CSS 2.0 规范 发 布 , 意图 通过 字体 匹配 , 合成 和 下 载 技 术 , 改善 字体 的 选择 过 程 ， 
这 些 技术 并 没有 得 到 使 用 , 并 在 CSS2.1 规范 中 被 移 除 了 . 然而 , 在 1997 年 发 布 的 |E 

4.0 增加 了 对 字体 下 载 的 支持 , 随后 , CSS 3 的 字体 模块 变 包 含 了 字体 下 载 , 并 且 Safari 

3.1, Opera 10 和 Mozilla Firefox 3.5 实现 了 这 一 功能 , 随后 便 增加 了 Web 字体 和 所 使 用 

字体 的 下 载 . - wikipedia 

综合 学 习 : 
e Web 字体 排版 [watch][$] 
e @font-face 快速 学 习 指 南 [read] 


。 响应 式 排版 [watch][$] 
© 用 最 好 的 字体 来 美化 网 页 [read] 


无 障碍 设计 


无 障碍 设计 


综 


无 障碍 设计 是 指 产品 , 设备 , 服务 , 或 者 环境 是 为 残疾 人 设计 的 . 无 障碍 设计 的 概念 意味 着 


与 一 个 人 的 辅助 技术 (例如 , 电脑 屏幕 阅读 器 ) 相 兼容 , 确保 直接 访问 ( 即 独立 ) 和 "间接 访问 " 


无 障碍 设计 可 以 理解 为 "能 够 访问 ", 并 对 一 个 系统 或 实体 是 有 利 的 , 其 侧重 于 使 身体 残障 ， 


或 有 特殊 需要 , 或 要 依赖 辅助 技术 的 人 群 能 够 访问 Web. 然后 , 研究 和 开发 无 障碍 设计 对 
每 个 人 都 带 来 了 好 处 . 


无 障碍 设计 不 应 该 和 可 用 性 混淆 . 大 多 数 情况 下 , 可 用 性 是 指 产品 (如 : 设备 , 服务 , 或 者 环 
境 ) 能 在 特定 的 环境 下 被 特定 的 用 户 使 用 , 来 高 效 地 实现 制定 目标 . 


无 障碍 设计 和 通用 性 设计 是 息息相关 的 . 通用 型 设计 是 指 产 品 的 创造 过 程 中 , 产品 对 人 们 


是 可 用 的 , 并 尽 可 能 最 大 范围 机 各 能 力 范围 内 的 人 群 和 各 种 情形 下 的 操作 , 即 对 所 有 人 
是 可 访问 的 (无 论 他 们 访问 Web SAR 章 碍 ). - wikipedia 
合 学 习 : 


e Web 应 用 程序 通用 设计 [read][RMB] 

© Web 无 障碍 设计 入 门 [watch][$] 

e Web 无 障碍 设计 介绍 [read] 

© 兼 济 天 下 :用 户 无 障碍 体验 的 可 访问 性 设计 [read][RMB] 
。 UX 基础 : 无 障碍 设计 [watch][$] 

e Web 无 障碍 设计 介绍 [watch] 


标准 /规范 : 


e 无 障碍 设计 网 络 倡议 (WAI) 
。 网 页 内 容 无 障碍 设计 指南 (WCAG) 的 目前 状态 
e 富 Internet 应 用 程序 的 无 障碍 设计 (WAI-ARIA) 的 目前 状态 
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Web/#! i, & API 


Web/ 浏 览 API 


BOM 和 DOM 并 不 是 唯一 的 浏览 器 API, 在 浏览 器 内 部 的 Web 平台 上 , 它们 是 可 用 的 . DOM 
和 BOM 并 不 是 一 切 , 但 是 一 个 用 于 浏览 器 编程 的 接口 可 以 被 认识 一 个 Web 或 者 浏览 器 
API( 起 剧 的 是 , 这 些 API 曾 被 称 为 HTML 5 API, 这 会 和 HTML 5 自身 的 规范 /标准 混淆 , 因为 
HTML 5 规范 特 指 HTML 5 标记 语言 ). Web 或 浏览 器 API 也 会 包括 访问 设备 的 API( 如 : 
Navigator.getBattery() ), 通过 平板 和 手机 设备 上 的 浏览 器 可 以 利用 这 些 API. 


Css32D 


Transforms c t Security 
Offline Web Policy 
Apps:AppCache 


Canvas Transforms 









Full Screen API 


Gradients 









css3 
Transitions 


CSS3 Flexbox 
WebGD pom Mutation 
observers 


IndexedDB 
requestAnimationFrame 


在 适当 情况 下 , 你 应 该 了 解 和 学 习 Web/ 浏 览 器 API AT RARE API, 应 该 去 研 
究 HTML5test.com 对 与 5 款 常用 浏览 器 对 APL 新 特性 的 支持 结果 , 这 是 一 个 很 不 错 的 方式 . 
学 习 文 档 : 


e DIVE INTO HTMLS [read] 
e HTML5 专业 开发 [read] 
e HTML5 Canvas [read] 


学 习 视 频 : 


。 Web Audio 的 乐趣 [watch] 


55 


Web/à] = 3 API 


e 用 Web Audio 给 网 站 添加 声音 [watch] 
e Web Audio API [read] 


言 息 : 


此 外 ,MDN 有 很 多 关于 web/browser API 的 信 ， 


e MDN Web API 参考 
e MDN WebAPI - 设备 访问 API 和 其 它 有 用 的 API 


e MDN Web APIs 接口 参考 


时 刻 记 住 , 并 不 是 每 一 个 API 都 在 W3C 或 WHATWG 的 规范 之 内 . 


除了 MDN, 还 列 出 了 一 些 有 用 的 资源 : 


e HTMIS-overview 
e platform.html5.org 
e HTML5 和 JavaScript API 索引 


JSON 


JSON(JavaScript Object Notation) 


JSON, 有 时 也 称 JavaScript + RAR, 是 一 种 使 用 人 类 可 读 的 文本 传输 由 键 值 对 组 成 的 
数据 对 象 的 开放 格式 . 对 于 异步 浏览 器 /服务 器 通信 (AJAJ), JSON 是 主要 的 数据 格式 , 很 
大 程度 上 代替 了 XML(AJAX). 


尽管 最 初 是 从 JavaScript 脚本 语言 衍生 而 来 , 但 是 JSON 是 语言 无 关 性 的 数据 格式 , 在 许 
多 编程 语言 中 , 代码 解析 和 生成 ISON 是 很 容易 的 . 


JSON 的 格式 最 初 是 由 Douglas Crockford 指定 的 , 但 目前 却 被 描述 成 两 种 标准 : RFC 
7159 和 ECMA-404. ECMA 标准 只 允许 被 合法 的 语法 语句 描述 , 而 RFC 则 提供 了 一 些 语 
义 化 描述 和 安全 考虑 . ISON 的 官方 网 络 媒体 类 型 application / JSON, 扩展 名 是 json. - 


wikipedia.org 


e json.com [read] 
e 什么 是 JSON [watch] 
。 JSON 权威 指南 [read][$] 


参考 /文档 
e json.org/ [read] 
标准 /规范 : 


e ECMA-404 JSON 数据 交互 格式 
e RFC 7159 JSON 数据 交互 格式 


架构 设计 : 
e JSON API 
译 者 补充 : 


e JSON 系列 文章 
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静态 网 页 生成 器 


静态 网 页 生成 器 , 是 使 用 服务 器 端 代码 编写 (如 : ruby, php, python, nodeJS 等 ...), 用 静态 文本 
数据 + 模板 , 生成 从 服务 器 发 送 到 客户 端的 静态 HTML 文件 . 


e a AM ARS [read] 


前 端 应 用 架构 设计 


JavaScript Web 应 用 开发 [read][RMB] 

e 用 React & Ampersand 构建 APP [watch][$] 
e Human JavaScript [read] 

e JavaScript 应 用 程序 编程 [read] 

构建 现代 单 页 应 用 [watch][$] 

JavaScript 函数 式 编程 [watch][$] 
JavaScript: 模块 [read] 

e Web UI 架构 设计 [watch][$] 

e Web 应 用 设计 指南 [read] 

e Ul 架构 设计 [watch][$] 

e Terrific [read] 

e Nicholas Zakas: 可 扩展 的 JavaScript 应 用 架构 [watch] 
e 大 型 JavaScript 应 用 架构 设计 模式 [read] 

。 # A>) 48 h [read] 
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接口 /API 设计 
数据 (类 似 JSON) API: 


e Build APIs You Won't Hate [$][read] 
e JSON API [read] 


JavaScript API 


e Writing JavaScript APIs [read] 
e Designing Better JavaScript APIs [read] 


译 者 补充 


。 HTTP API 设计 指南 
。 用 JSON 构建 API 的 标准 指南 


Web 开发 者 工具 


Web 开发 者 工具 


Web 开发 者 工具 允许 开发 者 测试 和 调试 代码 , 它们 不 同 于 网 站 生成 器 和 IDE, 因为 Web 
开发 者 工具 不 直接 参与 网 页 的 创建 , 而 是 用 于 测试 网 站 或 Web 应 用 的 用 户 界面 接口 的 工 
具 . 


Web 开发 者 工具 是 浏览 器 的 加 载 项 或 内 置 . 当今 最 流行 的 web 浏览 器 , Google 
Chrome, Firefox, Opera, Internet Explorer, f Safari 都 内 置 工 具 用 于 帮助 开发 者 , 并 且 在 
各 自 的 插件 下 载 中 心 , 还 提供 很 多 额外 的 加 载 项 . 


Web 开发 者 工具 允许 开发 者 使 用 各 种 各 样 的 Web 技术 , 包括 HTML, CSS, DOM, 
JavaScript 和 其 它 浏览 器 能 够 处 理 的 组 件 . 由 于 日 益 增长 的 需求 ,更 多 流行 的 Web 浏览 
器 包括 了 更 多 面向 开发 人 员 的 功能 


尽管 大 多 数 浏览 器 都 配备 了 开发 者 工具 , 但 是 谷歌 开发 者 工具 是 目前 谈论 最 多 , 应 用 最 广泛 的 
开发 者 工具 . 


我 建议 学 习 和 使 用 谷歌 开发 者 工具 , 因为 谷歌 开发 者 工具 周围 有 学 习 Web 开发 者 工具 最 好 的 


学 习 使 用 谷歌 开发 者 工具 : 


e Explore and Master Chrome DevTools 
e Chrome 开发 者 工具 [watch][$] 
e 使 用 Chrome 开发 者 工具 [watch][$] 


谷歌 开发 者 工具 文档 : 


e Per-Panel 文档 
。 命令 行 接口 参考 
o 键盘 & U| 快捷 键 参考 
e 设置 
新 闻 / 简 报 /博客 /建议 : 
e Dev Tips 
译 者 补充 : 


e Chrome Devtools Tips & Tricks 
。 Chrome 开 发 者 工具 不 完全 指南 
e Chrome 开发 工具 指南 
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Web 开发 者 工具 
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命令 行 


命令 行 接口 或 命令 语言 解 译 器 (CLI), 也 称 命令 行 用 户 界 面 , 控制 台 用 户 界 面 和 字符 用 广 
(CUI), 起 一 种 用 户 以 3-4 卖 的 文本 (命令 和 47) kt 2 
方式 . - wikipedia 


入 门 学 习 : 


e codecademy: Learn the Command Line [watch] 

The Command Line Crash Course [read] 

e Meet the Command Line [read][$] 

e Learn Enough Command Line to Be Dangerous [read][free tp $] 
e Command Line Power User [watch] 


进 阶 学 习 : 


e Advanced Command Line Techniques [watch][$] 
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Node.js 


Node.js 


Node.js 用 于 开发 服务 端 Web 应 用 , 是 一 个 开源 的 , 跨 平台 的 运行 时 环境 . Node.js 应 用 由 
JavaScript 编写 , 可 以 在 OS X, Microsoft Windows, Linux, FreeBSD, NonStop, IBM AIX, 
IBM System z and IBM i 上 的 Node.js 运行 时 环境 运行 . Node.js 的 开发 和 维护 有 Node.js 
基金 会 提供 支持 , 这 是 Linux 基金 会 的 一 个 合作 项 目 . 


Node.js 提供 一 个 事件 驱动 的 体系 架构 和 非 阻塞 的 MO 设计 来 优化 应 用 程序 的 吞吐 量 和 实 
时 web 应 用 程序 的 可 伸缩 性 , 它 使 用 谷歌 的 V8 JavaScript 引擎 来 执行 代码 , 并 有 大 量 的 由 
JavaScript 编写 的 基础 模块 . Node.js 包含 内 置 的 模块 , 允许 应 用 程序 作为 一 个 web 服 务 器 
而 不 依赖 类 似 Apache HTTP Server, Nginx 或 IS 的 软件 . - wikipedia 


入 门 学 习 : 


© 从 事件 角度 介绍 Node.js [watch][$] 
e Node 的 艺术 [read] 

e Node.js 基础 [watch][$] 

e io.js 和 Node.js 入 门 [watch][$] 

e 全 面 学 习 Nodes [watch] 

e Node 初学 者 书籍 [read][$] 

e Node.js 介绍 [watch][$] 

e Node.js 实战 [read][$] 

e Nodeschool.io [code] 


译 者 补充 : 


。 Node.js 经 典 入 门 教程 (中 文 版 ) 
e MH% Node.js 系列 文章 
。 Node.js 入 门 

e Node.js 中 文 文档 : 1 23 

e Node.js 风格 指南 

e Express 中 文 文档 : 1 2 

e Express 指南 

e Koa 中 文 文档 :1234 

e NodeCloud 

e Node 面 试题 

e Node.js 中 文 资料 导航 

e Node.js 开发 常用 资源 (awesome-nodejs)1 开发 资源 2 开发 资源 3 
e Node-books 
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Node.js 


65 


React.js 


React 


React - 用 于 构建 用 户 界 面 的 JAVASCRIPT 库 


仅仅 是 UI - 许多 人 使 用 React 作 为 MVC 架 构 的 V 层 。 尽管 React 并 没有 假设 过 你 的 其 余 技 
术 栈 ， 但 它 仍 可 以 作为 一 个 小 特征 轻易 地 在 已 有 项 目 中 使 用 


虚拟 DOM - React 为 了 更 高 超 的 性 能 而 使 用 虚拟 DOM 作 为 其 不 同 的 实现 。 它 同时 也 可 以 
由 服务 端 Node.js 泻 染 一 而 不 需要 过 重 的 浏览 器 DOM 支 持 


数据 流 - React 实 现 了 单 向 响应 的 数据 流 ， 从 而 减少 了 重复 代码 ， 这 也 是 它 为 什么 比 传统 
数据 绑 定 更 简单 。 


入 门 教程 : 


e React 入 门 实例 教程 

e React 介绍 及 实践 教程 此 文中 的 demo 实 现 : demo 
e React 入 门 教程 

e Learning React 

e SurviveJS - Table of Contents 


进 阶 学 习 : 


。 深入 浅 出 React 系列 

e React.js 生态 系统 概览 

。 详解 React Flux 架 构 工作 方式 
e Awesome React 

e AlloyTeam: React 专栏 


手册 参考 : 


e React 速 查 手册 
e React Cheat Sheet 
e React Style Guide 


TH: 


e Awesome Redux 

e Webpack 中 文 文档 

e Webpack 学 习 笔 记 

e Webpack 傻 瓜 式 指南 
React Webpack Cookbook 
e Webpack 

React Toolbox 
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React.js 


React Native: 


e React Native Lession 
e Awesome React Native 
e React Native 探索 系列 
。 React Native 专题 

e React Native 学 习 指 南 
e React Native 中 文 版 
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e 用 Browserify 创建 JavaScript 模块 [watch][$] 
e Webpack 基本 原理 [watch] 

e browserify-handbook [read] 

ES6 722 [read] 


参考 /文档 : 


e browserify 

e system.js 

e Webpack 
译 者 补充 : 


e React Webpack cookbook 
o 详解 前 端 模块 化 工具 -Webpack 
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包 管 理 器 


包 管 理 器 或 包 管 理 系统 是 一 系列 软件 工具 的 集合 , 这 些 软件 工具 用 和 电脑 操作 系统 一 致 的 
方式 , 使 应 用 的 安装 , 升级 , 配置 和 删除 软件 包 的 过 程 自动 化 , 它 通常 维护 一 个 数据 库 软 件 
的 依赖 和 版 本 信息 , 防止 软件 不 匹配 和 无 法 跟踪 . - wikipedia 


e Bower 基本 原理 [watch][$] 

© 包 管 理 器 : 前 端 开发 人 员 入 门 指南 [read] 
e NPM: 包 的 上 传 和 运行 [watch][$] 

。 NPM 基础 [watch][$] 

e NPM 书籍 [read] 

e NPM & Bower: 依赖 版 本 管理 [read] 


参考 /文档 : 


e Bower 
e jspm.io 
e NPM 
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版 本 控制 


版 本 控制 


软件 配置 管理 , 版 本 控制 的 一 个 组 成 部 分 , 也 称 为 校正 控制 或 源码 控制 , 用 于 管理 文档 , 计 
算 机 程序 , 大 型 网 站 和 其 它 信息 集合 的 变化 . 变化 通常 被 定义 为 一 串 数 字 或 字母 代码 ,被 称 
为 "版 本 编号 ", "版 本 标识 ", 或 简称 "版 本 ". 举 个 例子 , 初始 的 文件 集合 是 "版 本 1", 当 第 一 个 
改变 文件 时 , 就 变 成 了 "版 本 2" 等 等 . 每 一 个 版 本 都 和 一 个 时 间 改 和 做 出 改变 的 人 联系 在 一 
起 . 版 本 可 以 被 比较 , 恢复 和 跟 其 它 文件 合并 . - wikipedia 

入 门 学 习 : 
e codeschool.com [interact] 
e Git 基本 原理 [watch][$] 
e 正确 使 用 Git [read] 
e Git 介绍 [read] 
e Git 权威 指南 [read] 


进 阶 学 习 : 

e Git 进 阶 [read] 

e Git 权威 指南 [read] 
参考 /文档 : 

e https://git-scm.com/doc 
译 者 补充 : 


e Pro Git 教程 

。 Git 教程 

e git-scm() 中 文 版 
e my-git 
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构建 和 任务 自动 化 


构建 自动 化 是 软件 构建 和 相关 流程 的 自动 化 过 程 , 包括 : 将 计算 机 源码 编译 成 二 进 制 代码 ， 
打包 二 进 制 代码 和 运行 自动 化 测试 . - wikipedia 
综合 学 习 : 
e 用 Gulp.js 进行 JavaScript 自动 构建 : [watch][$] 
e Gulp A [read][$] 
e Gulp 快速 入 门 [watch][$] 
e 学 习 Gulp - 前 端 工 厂 入 门 [read] 
e Gulp 基础 [watch][$] 
e 使 用 npm 作为 任务 运行 器 [watch][$] 


参考 /文档 : 


e gulp 
Gulp 是 非常 棒 的 构建 工具 , 然后 , 你 可 能 仅仅 只 需要 nm run .在 你 的 应 用 程序 栈 变 得 负责 之 


ay, 问 问 你 自己 ，npm run 是 否 能 完成 自动 化 构建 . 如果 你 需要 更 多 , 可 以 同时 使 用 npm run 和 
Gulp. 


推荐 阅读 : 


e NPM 使 用 指南 

© NPM 的 任务 自动 化 管理 

。 构建 工具 VS NPM BA: 为 何不 使 用 两 者 
e 使 用 NPM 作为 下 一 个 项 目的 构建 系统 

e 怎么 将 NPM 作为 构建 工具 使 用 


译 者 补充 : 
e Gulp 不 完全 入 门 教 程 


网 站 性 能 优化 


网 站 性 能 优化 


Web 性 能 优化 , WPO, 或 网 站 优化 是 提高 用 户 浏览 器 的 网 站 加 载 和 显示 速度 的 知识 领域 . 
由 于 网 速 整 体 提高 了 , 很 适合 网 站 的 管理 者 和 维护 者 去 考虑 网 站 呈现 给 访问 者 所 花费 的 时 
间 了 . - wikipedia 


。 网 站 性 能 [watch][$] 


。 高 性 能 网 站 建设 指南 : 前 端 工程 师 技能 精 史 [read][RMB] 
o 高 性 能 网 站 建设 进 阶 指南 : Web 开 发 者 性 能 优化 最 佳 实践 [read][RMB] 


e Web 性 能 实践 日 志 [read][RMB] 
e JavaScript 性 能 宝石 [read] 

e 性 能 日 历 [read] 

e 页 面 速度 见解 规则 [read] 

。 网 站 性 能 优化 [watch] 

。 浏览 器 泻 染 优化 [watch] 

e Using WebPageTest [read][$] 

e Web 性 能 权威 指南 [read][RMB] 
e perf.rocks 


译 者 补充 : 


o 谷歌 的 性 能 优化 指南 
前 端 性 能 优化 指南 
AlloyTeam: Web 性 能 优化 专栏 
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JS 


测试 


JS 测试 


综 


单元 测试 - 在 计算 机 程序 中 , 单元 测试 是 一 种 软件 测试 方法 , 通过 ae ane 一 个 或 

多 个 计算 机 程序 模块 的 集合 , 和 相关 联 的 控制 数据 , 使 用 程序 和 操作 过 程 进行 测试 , 以 确定 
它们 是 否 适 合 使 用 . 直观 地 说 , 可 以 将 一 个 单元 视 为 应 用 程序 最 小 的 ， nae 
Wikipedia 


功能 测试 - 功能 测试 是 一 个 质量 保证 (QA) 的 过 程 , 也 是 一 种 基于 在 软件 组 件 测试 规范 之 下 
的 测试 案例 的 黑 盒子 测试 . 功 (eine Sans 序 的 输入 和 输出 , 但 很 少 去 考虑 内 部 地 程序 
结构 ( 跟 白 盒子 测试 不 同 ). 功能 测试 通常 描述 了 系统 "做 什么 ". -Wikipedia 


集成 测试 - 在 软件 测试 中 , 集成 测试 (也 称 集成 和 测试 , 缩写 为 |&T) 是 各 个 软件 模块 结合 起 
来 , 作为 一 个 整体 进行 测试 的 阶段 ,之 后 便 是 单元 测试 和 验证 测试 . 集成 测试 把 已 经 通过 的 
单元 测试 作为 输入 模块 , 将 它们 组 织 成 更 大 的 聚集 ,在 集成 测试 中 应 用 计划 用 于 这 些 聚 集 
而 被 定义 的 测试 , 并 提供 为 集成 测试 做 好 准备 的 集成 系统 作为 其 输出 . - Wikipedia 


宗 合 学 习 : 


e 测试 驱动 的 JavaScript 7X [read][RMB] 

e 编写 可 测试 的 JavaScript 代码 [read][RMB] 

e JavaScript Testing Recipes [read][$] 

前 端 优先 : JavaScript 的 测试 和 原型 设计 [watch][$] 
测试 驱动 的 JavaScript [watch][$] 
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无 党 浏览 器 是 指 没 有 图 形 用 户 界 面 的 Web 浏览 器 . 


则 览 器 拥有 一 个 和 受 欢 迎 的 Web 浏览 器 相似 的 环境 , 并 提供 了 网 页 的 自动 化 控制 , 但 
要 通过 命令 行 接口 或 使 用 网 络 通信 工具 执行 . 对 于 测试 网 页 , 无 壳 浏 览 器 是 非常 有 用 的 , A 
为 和 普通 浏览 器 一 样 , CA AES He Fe AF HTML, 包括 样式 元 素 , 如 : 页 面 布 局 , ME, 字体 

选择 , JavaScript 的 执行 和 AJAX, 但 是 当 使 用 其 它 方法 时 , Ajax 通常 就 不 可 用 了 . 在 2009 
年 ,谷歌 声称 使 用 无 党 浏览 器 有 助 于 搜索 引擎 使 用 Ajax 从 其 它 网 站 索引 内 容 . - wikipedia 


PhantomJS Cookbook [read][$] 

Getting Started with PhantomJS [read][$] 
Rapid PhantomJS [watch][$] 

PhantomJS for Web Automation [watch] 
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离线 开发 


离线 开发 (又 称 离线 优先 ) 是 一 个 领域 常识 和 国 绕 设备 并 不 总 是 连接 到 互联 网 或 电源 的 开发 实践 
的 讨论 . 


e offlinefirst.org [read] 

。 HTML5 离线 Web 应 用 [read] 

。 离线 优先 [read] 

© 创建 离线 应 用 你 需要 知道 的 一 切 [read] 


浏览 器 安全 手册 [read] 

HTML5 安全 手册 [read] 

前 端 安 全 [watch] 

Security for Web Developers: Using JavaScript, HTML, and CSS [read][$] 
现代 Web 应 用 安全 指南 [read][$] 

Web 安全 基础 [read] 
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多 平台 开发 


THIS IS THE WEB. 


THIS IS NOT I Dg 四 


THE WEB 





备 (手表 , RES, 电 冰箱 等 等 ) 你 将 怎么 决定 支持 哪些 平台 和 为 支持 这 些 平台 ， 
被 称 为 多 平台 开发 策略 . 接 下 来 , 我 会 列 出 常见 的 多 平台 开发 策略 : 


e 创建 响应 式 Web 设计 (RWD) 网 站 /APP 

e 创建 RESS (基于 服务 端 组 件 的 响应 式 Web 设计 ) 网 站 /APP 

© 创建 自 适应 /渐进 增强 地 网 站 /APP 

。 对 每 一 个 或 每 一 组 平台 建立 一 套 网 站 , Web 应 用 , 本 地 应 用 或 混合 应 用 
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多 平台 开发 


© 尝试 修改 你 用 策略 1, 策略 2 或 策略 创建 的 应 用 . 这 可 能 和 点 组 与 屏幕 大 小 无 关 的 部 分 UI 一 


样 简单 ,也 可 以 试图 完全 支持 其 他 平台 与 整个 UL. 


入 门 学 习 : 


自 适 应 网 页 设计 [read][$] 

设计 与 渐进 增强 [read] 

e 响应 式 排版 [watch][$] 

e 响应 式 Web 设计 [watch][$] 

响应 式 HTML 邮件 设计 [watch][$] 

e Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences 


across Devices [read][$] 
e 响应 式 Web 设计 原理 [watch] 
响应 式 图 片 [watch] 
移动 Web 开发 [watch] 


译 者 补充 : 


e 移动 Web 调试 工具 : weinre 
e Responsive demos & tutorials 
© 打造 最 舒适 的 Webview 调试 环境 


N 
© 


Directed learning 


This section focuses on directed learning via schools, courses, programs and bootcamps. 


Directed learning 


The table below contains instructor led, paid, front-end courses, programs, schools, and 
bootcamps. 


If you can't afford a directed education, a self directed education using screencasts, books, 
and articles is a viable alternative to learn front-end development for the self-driven 
individual. 


company 


lron Yard 


Udacity 


The New York Code 
+ Design Academy 


Portland Code School 


BLOC 


Thinkful 


General Assembly 


Hackbright Academy 


HackerYou 


The Flatiron School 


Austin Coding 
Academy 


Codeup 


Betamore 


Codify Academy 


DecodeMTL 
gr8code 


LearningFuze 


course 
Front End Engineering 


Front-End Web 
Developer Nanodegree 


Front End 101 
Advanced Front-end 
Developer Tools 


Become a Frontend 
Developer 


Frontend Web 
Development 


Frontend Web 
Development 


Front-End Web 
Development 


Front-end Web 
Development 
Immersive 


Introduction to Front- 
End Web Development 


The Front End Track 


Night Front-End 
Bootcamp 


Front-end Web 
Development 


Front-end Web 
Development 


Learn Front-end Web 
Development 


Front-End Bootcamp 


Part-Time Front-End 
Development Course 


price 
12,000 


200 
monthly 


2,000 


2,000 


4,999 


300 per 
month 


3,500 


3,000 


7,000 - 
7,910 


3,500 


1,490 
per 
class 


8,500 


8,500 


4,000 


2,500 
10,000 


2,500 


on site remote 


multiple 
locations 


multiple 
locations 


New York, 
NY 


yes 


Portland, 
OR 


yes 


yes 
multiple 
locations 


San 
Francisco, 
CA 


Toronto, 
Canada 


New York, 
NY 


Austin, TX 


San 
Antonio, 
Texas 


Baltimore, 
MD 


multiple 
locations 


Montreal, 
QC 


Tampa, FL 


Irvine, CA 
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地 变 得 没有 意义 . 前 端 开 发 的 高 级 从 业 人 员 已 经 产 出 足够 多 的 
资讯 "(简报 , 资讯 & 博客 ), 跟着 社区 学 习 就 行 . 


前 端 简报 , 资讯 & 博客 


综合 的 前 端 简报 , 资讯 & 博客 


e shoptalkshow.com 

e frontendfront.com 

e webtoolsweekly.com 

e O'Reilly Web Platform Radar 
e The Web Platform Podcast 

e The Web Platform Podcast 

e The Web Ahead 

e The Big Web Show 

e Fresh Brewed Frontend 

e Mobile Web Weekly 

e Open Web Platform Daily Digest 
e FRONT-END DEV weekly 

e Web Design Weekly 

e Front-end News in 5 Minutes 
e TTL 

e Viewsources 

e Web Components Weekly 


HTML/CSS 简报 : 


e HTML 5 Weekly 
e CSS Weekly 


JavaScript 简报 , 资讯 & 博客 : 


e Javascript Jabber 
e JavaScript Weekly 
e Echo JS 
JavaScript Kicks 


e javascript.com 
e FiveJS 
JavaScript Live 


图 形 和 动画 简报 & 博客 : 


e Motion and Meaning 


SVG Immersion Podcast 
Web Animation Weekly 
e Responsive Images Community Group Newsletter * 


前 端 简报 , 资讯 & 博客 


译 者 补充 : 


a $F Bl 
FEX 

开发 者 头条 
码 农 周 刊 
OurJS 
编程 狂人 
一 周 拾 遗 
HÉ È 
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第 三 部 分 会 简单 地 讨论 一 些 前 端 开发 工具 的 使 用 . 
为 确保 你 理解 一 套 工 具 所 属 的 类 别 , 建议 在 此 之 前 先 研究 工具 本 身 . 


注意 , 仅仅 是 一 个 工具 列表 , 或 一 个 类 别 的 工具 记录 , 但 这 并 不 等 于 我 断言 , 前 端 开 发 人 员 应 该 


ws 


学 习 它 并 使 用 它 . 选择 自己 的 工具 箱 , 我 只 是 提供 常见 的 工具 箱 选项 . 
译 者 补充 : 


。 Web 前 端 开 发 资源 汇总 


常用 前 端 开 发 工具 


常用 前 端 开 发 工具 
开发 工具 : 


e screensiz.es 
e placehold.it 
e codekit 

e prepros 

e Browsersync 
e ish. 2.0. 

e Wraith 


在 线 代 码 编辑 : 


e jsbin.com 

e jsfiddle.net 

e liveweave.com 
e es6fiddle.net 
e codepen.io 

e Plunker 


查找 工具 : 


stackshare.io 

e javascripting.com 
e built with 

e microjs.com 

e The Tool Box 

e unheap.com 

e stylesheets.co 


DOC/API 浏览 工具 
用 于 浏览 开发 者 文档 和 API 文档 的 工具 


e devdocs.io 

e Dash [OS X, iOS][$] 

e Velocity [Windows][$] 
e Zeal [Windows, Linux] 


SEO 


SEO 工具 


e Google Webmasters Search Console 
e Varvy SEO tool 
e Keyword Tool 
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原型 和 框架 工具 
创建 原型 和 框架 : 


e Balsamiq Mockups [$] 
e Justinmind [$] 
e UXPin [free to $] 


合作 /展示 : 


e InVision [free to $] 
e myBalsamigq [$] 
e conceptboard [free to $] 


图 表 工 具 


e Cacoo [free to $] 
e gliffy [free to $] 
e draw.io [free to $] 


HTTP/ 网 络 


HTTP/ 网 络 工具 
e Charles [$] 

e Fiddler 

e Postman 


e Chrome DevTools Network Panel 


了 解 代 码 编 辑 器 


源 代码 编辑 器 是 一 个 文本 编辑 程序 , 专门 为 编辑 计算 机 程序 源 代码 的 程序 员 而 设计 的 , 它 
可 能 是 一 个 独立 的 应 用 程序 或 内 置 在 集成 开发 环境 (IDE) 或 web 浏 览 器 中 . 源 代码 编辑 器 是 
最 基本 的 编程 工具 , ,作为 程序 员 的 基本 工作 就 是 编写 和 编辑 源 代码 . - Wikipedia 


前 端 代码 可 以 被 一 个 简单 的 文本 编辑 应 用 程序 (如 : Notepad 或 TextEdit), 但 是 , 大 多 数 前 端 人 
员 使 用 专门 为 一 种 编程 语言 而 设计 的 代码 编辑 器 编辑 . 


可 以 这 么 说 , 代码 编辑 器 有 各 种 各 样 的 类 型 和 大 小 . 选择 一 个 编辑 器 是 主观 行为 。 选 择 一 个 , 学 
习 它 的 使 用 ,然后 继续 学 习 HTML, CSS 和 JavasCript DOM. 


但 是 , 我 一 直 相 信 , 编辑 器 应 该 有 如 下 特点 : 


© 一 份 不 错 的 关于 如 何 使 用 编辑 器 的 文档 

e 报告 HTML, CSS 和 JavaScript 代码 的 质量 

。 为 HTML, CSS 和 JavaScript 提供 语法 高 亮 

。 为 HTML, CSS 和 JavaScript 提供 代码 自动 完成 

o 通过 插件 的 方式 自 定 义 编辑 器 架构 

© 有 大 量 的 第 三 方 仓库 /插件 社区 , 能 够 用 于 自 定义 编辑 器 
。 轻 量 , 简单 , 不 耦合 代码 (不 需要 编辑 代码 等 等 ) 


我 个 人 推荐 将 下 列 的 插件 和 Sublime Text 一 起 使 用 : 


e Package Control 

e AutoFileName 

e SublimeLinter 
o SublimeLinter-json 
o SublimeLinter-jslint 
o SublimeLinter-html-tidy 

e SideBarEnhancements 

e Terminal 

e BracketHighlighter 

e Color Highlighter 

e CSS3 

e HTMLAttributes 

e StringEncode 

e HTML-CSS-JS Prettify 


Sublime 的 学 习 资 源 : 


e Sublime Productivity [read][$] 
e Sublime Text Power User Book [read + watch][$] 


e Sublime Text 3 From Scratch [watch][$] 
e Perfect Workflow in Sublime Text 2 [watch][requires login, but free] 


代码 编辑 器 : 


e Atom 

e Brackets 

Sublime Text [$] 
WebStorm [$] 
Visual Studio Code 


在 线 合作 的 代码 编辑 器 : 


e jsbin.com [free to $] 


jsfiddle.net 

e liveweave.com 
esG6fiddle.net 

e codepen.io [free to $] 


e Plunker 
在 线 代码 编辑 器 : 


e codeanywhere [free to $] 
e Koding [free to $] 
e Clound9 [free to $] 
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e URI.js 

e platform.js 
e history.js 

e html2canvas 


e caniuse.com 

e HTML5 Please 

e HTML5 test 

e Browserscope 

e webbrowsercompatibility.com 
e iwanttouse.com/ 

e Platform status 

e Browser support for broken/missing images 
e Big JS-Compatibility- Table 

e jscc.info 

e What Web Can Do Today 


浏览 器 开发 /调试 工具 : 


e Opera Dragonfly 


Safari Web Inspector 


Firefox Developer Tools 


Chrome Developer Tools(aka DevTools) 
o Per-Panel Documentation 
o Command Line API Reference 
o Keyboard & Ul Shortcuts Reference 
o Settings 


IE Developer tools(aka F12) 
e vorlon.js 


同步 浏览 工具 : 
e Browsersync 
浏览 器 编码 工具 (判断 用 户 的 浏览 器 是 否 支持 某 特性 ): 


e Modernizr 
e ES Feature Tests 
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sa] y 38 
AJ 见 ae 


浏览 器 的 各 种 polyfills/shims: 


e webcomponents.js 

e webshim 

e HTML5 Cross Browser Polyfills 
e console-polyfill 

e socket.io 

e sockjs 


浏览 器 承载 测试 /自动 化 : 


e browserstack [$] 

e browserling[$] 

e Sauce labs [$] 

e Selenium 

e CrossBrowserTesting.com 


无 党 浏览 器 : 


e PhantomJS 
e slimerjd 
e TrifleJS 


无 党 浏览 器 的 自动 化 工具 : 


è nightwatchjs 
e casperJS 

e Nightmare 
e gremlins.js 


We 


浏览 器 hacks: 


e browserhacks.com 
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HTML 


HTML 工具 
HTML 模板 : 


e HTMLS Boilerplate 

e Mobile boilerplate 

e Web Starter Kit Boilerplate & Tooling for Multi-Device Development 
e dCodes 

e HTML5 Bones 

e Email-Boilerplate 

e Pears 


HTML polyfill: 
e html5shiv 
Transpiling: 
e jade 
e HAML 
e Markdown 


文档 参考 : 


e HTML Interfaces Browser Support 
e HTML Entity Lookup 
e HTMLElement.info 
e ELements 
e Elelemt Attributes 
e HTML Arrows 
Linting/hinting: 


e html5-lint 
e HTMLHint 
e html-inspector 


HTML 优化 : 
e HTML Minifier 
HTML 在 线 生 成 工具 : 


e tablesgenerator.com 
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HTML 


e Principles of writing consistent, idiomatic HTML 
e HTML code guide 


Workflow: 
e Emmet 
本 月 HTML 仓库 在 Github 的 趋势 : 


e https://github.com/trending?l=html&since=monthly 


98 


CSS 


CSS 工具 
桌面 & 移动 应 用 CSS IER: 


e Semantic UI 

e Foundation 

e Bootstrap 

e Metro UI 

e Pure.css 

e Concise 

e Materialize 

e Material Design Lite(MDL) 
e Base 


移动 应 用 CSS 框架 : 
e Ratchet 
CSS £ £: 


CSS 重 置 (或 重 置 CSS) 是 一 个 很 小 的 , 被 压缩 的 CSS 规则 集合 , 用 于 重 置 所 有 HTML 元 
素 的 样式 . - http://cssreset.com/ 


e Eric Meyer’s “Reset CSS” 2.0 
e Normalize 


Transpiling: 


e SASS/SCSS 

e stylus 

e PostCSS & cssnext 
e rework & myth 

e pleeease.io 


参考 文档 : 


e css3test.com 

e css4-selectors.com 

e css3clickchart.com 

e cssvalues.com 

e CSS TRIGGERS 

e MDN CSS reference 

e overapi.com CSS cheatsheet 


Linting/hinting: 


CSS 


e CSS Lint 
e stylelint 


代码 格式 化 /美化 : 


e CSScomb 
e cssfmt 


优化 : 


e csso 
e clear-css 
e cssnano 


CSS 在 线 生成 工具 : 


e Ultimate CSS Gradient Generator 
e Enjoy CSS 

e CSS matic 

e patternify.com 

e patternizer.com 

e CSS arrow please 

e flexplorer 

e Flexbox Playground 


CSS 架构 : 


e oocss [read] 
e SMACSS [read][$] 
e Atomic Design [read] 


编写 规范 : 
e idiomatic-css [read] 
e CSS code guide [read] 
e cssguidelin.es [read] 
e Google HTML/CSS Style Guide 


本 月 CSS 仓库 在 Github 的 趋势 : 


e https://github.com/trending?l=css&since=monthly 
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DOM 


DOM 工具 
DOM 库 /框架 : 


e jQuery 

e Zepto.js 

e keypress 
e clipboard.js 
e tether.io 


DOM ' 性 能 分 析 : 
e DOMMonster 
参考 文档 : 


e DOM Browser Support 
e DOM Events Browser Support 
e HTML Interfaces Browser Support 


Events 
MDN Document Object Model (DOM) 


DOM polyfills/shims: 


e dom-shims 
e Pointer Events Polyfill: a unified event system for the web platform 


虚拟 DOM: 


e jsdom 
e virtual-dom 
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JavaScript 


JavaScript 工具 
JS È: 


e lodash 

e underscore.js 
e Moment.js 

e string.js 

e Numeral.js 
èe accounting.js 
è xregexp.com 
e Math.js 

e wait 

è async 

e format.js 

e Chance 


编译 转换 (ESX to ESX): 
e Babel 

JavaScript 兼容 性 检查 : 
e jscc.info 

代码 检查 : 


e jshint 
e eshint 
e JSlint 
o jslinterrors.com 


单元 测试 : 


e Mocha 

e QUnit 

e Jasmine 
o Jest 


单元 测试 的 断言 库 : 


e should.js 
e Chai 
e expect.js 


JavaScript 


单元 测试 监控 , 存根 和 模拟 : 


e Sinon.js 
编码 规范 检查 : 

e JSCS 
代码 格式 化 /美化 : 


e jsfmt 

e esformatter 

e js-beautify 
性 能 测试 : 


e jsperf 
e benchmark.js 


可 视 化 ,静态 分 析 , 复杂 性 , RALA: 


e jscomplexity.org 
e istanbul 

e Blanket.js 

e Coveralls [$] 

e Plato 

e escomplex 

e Esprima 


优化 : 
e UglifyJS 2 
混淆 : 


e Javascript 混淆 器 
e JScrambler [$] 


在 线 代码 编辑 器 : 


e jsbin.com 


jsfiddle.net 
e es6fiddle.net 


e plnkr.co 


在 线 正则 表达 式 编辑 器 /可 视 化 工具 : 


e regex101 
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JavaScript 


e regexper 
e debuggex 
e RegExr 


编码 规范 : 


e Node.js 规范 指南 
e JavaScript 编码 原则 
e JavaScript 规范 指南 


本 月 JS 仓库 在 Github 的 趋势 : 
e https://github.com/trending?l=javascript&since=monthly 
NPM 上 被 依赖 最 多 的 包 : 


e https://www.npmjs.com/browse/depended 
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静态 网 页 生成 器 工具 
JS 网 页 生成 器 : 


e Metalsmith 
e harp 


JS 博客 网 站 生成 器 : 


e hubpress.io 
e Hexo.io 


网 站 生成 器 列表 : 


e staticsitegenerators.net 
e www.staticgen.com 


APP( 桌 面 , 移动 , 平板 等 ) 工具 
前 端 App 框架 : 


e AngularJS & Batarang 

e Backbone & Marionette 

e React & React-router & Flux & React Developer Tools 
e Vue.js & vue-loader & vue-router 

e Ember & Ember Inspector 

e Aurelia 

e Polymer & Iron Elements & Paper Elements 


全 栈 JS App 平台 : 


e Meteor 
e Hood.ie 
e MEAN 


移动 Web UN 网 站 /App 框架 : 
这 些 解决 方案 可 以 被 用 到 任何 地 方 , 包括 Web 视图 (Web 平台 和 浏览 器 引擎 等 ) APP. 


e Ratchet 

Kendo UI Mobile 
Mobile Angular UI 
e Framework7 


本 机 混合 移动 Webview 框架 : 
典型 解决 方案 是 使 用 Cordova, crosswalk, 或 者 自 定 义 Webview 作为 本 机 API 的 桥梁 . 


e ionic 
e onsen.io 


本 机 混合 移动 开发 Webview 环境 /平台 /工具 : 
典型 解决 方案 是 使 用 Cordova, crosswalk, 或 者 自 定义 Webview 作为 本 机 API 的 桥梁 . 


e AppBuilder [$] 

e Monaca [$] 

e Adobe PhoneGap [$] 
e kony [$] 

e ionic hub [free to $] 
e Taco 

e manifoldJS 


e cacoon [free to $] 
本 机 桌面 webview 应 用 框架 : 


e NW.s 
e Electron 


本 机 移动 应 用 框架 (又 称 JavaScript 本 机 应 用 ) 


解决 方案 不 使 用 浏览 器 引擎 或 Webview, 而 是 利用 JS 引擎 作为 运行 环境 去 编译 JavaScript, 
并 能 调用 本 机 的 APL. UI 则 使 用 本 机 的 Ul 组 件 进行 构造 . 


e NativeScript 


React Native 


tabris.js [free to $] 
e trigger.io [$] 


e todomvc.com 
App seeds/starters/boilerplates: 


e React Starter Kit 

Ember starter-kit 
NG*-starter 

e Angular 2 Webpack Starter 


e hjs-webpack 


脚手架 工具 
脚手架 是 指 为 整个 应 用 生成 一 个 初始 化 的 模板 , 而 不 是 生成 访问 数据 库 的 代码 . 


e Yeoman 
e Slush 


模板 工具 


Just Templating: 


e Mustache.js 
e Handlebars 
o htmlbars 


Nunjuncks 

e Transparency 
e dol.js 

e Hogan.js 


Templating and reactive data binding: 


e Rivets.js 

。 paperclip.js 
e riot 

è vue.js 

e ractive.js 
e react.js 

e RxJS 

e knockout 
e jquerymy.js 


Templating to Virtual DOM: 


e JSX 
e {7 


译 者 补充 : 


e Handlebars AJ] 
e Handlebars 系列 文章 


Ul 部 件 & 组 件 


UI 部件 & 组 件 工具 


桌面 & 移动 : 


Kendo UI [free to $] 
Webix [$] 

Semantic UI 

Metro UI 

Bootstrap 

Materialize 

Material UI 

Polymer Paper Elements 


桌面 (NW.js 和 Electron): 


photonkit 
React UI Components for OS X El Capitan and Windows 10 


专注 移动 : 


Ratchet 

Kendo UI Mobile 
Mobile Angular UI 
Framework7 
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数据 可 视 化 工具 
JS È: 


e d3 
e sigmajs 


** 部 件 & 组 件 :</h5> 


e Chart.js 

e C3.js 

e Google Charts 

e chartist-jsj 

e amCharts [$] 

e Highcharts [Non-commercial free to $] 
e FusionCharts [$] 

e ZingChart [free to $] 

e Epoch 


e Datawrapper 


infogr.am [free to $] 
plotly [free to $] 
ChartBlocks [free to $] 


图 形 工具 
常见 图 形 工具 : 


e Two.js 
e Fabric.js 


布 : 


ET 


e Paperjs 
e EaselJS 


SVG: 


e svg.js 

e Snap.svg 
e Raphaél 
e d3 


Webgl: 


e three.js 
e pixi.js 
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一 上 
ZI] 四 


动画 工具 


Velocity.js 
snabbt.js 
TweenJS 
Dynamics.js 
GreenSock-JS 


Polyfills/shims: 


e web-animations-js 
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JSON 


JSON 工具 
JSON 在 线 编辑 器 : 
e JSONmate 
JSON 查询 工具 : 


e DefiantJS 
e ObjectPath 
e JOSN Mask 


生成 模拟 JSON 工具 : 


e JSON Generator 
e Mockaroo 


JSON API 在 线 模拟 工具 : 


e Mocky 

e FillText.com 

e JSONPlaceholder 
e mackable.io 


* JSON API 本 地 模拟 工具 :</h5> 
e json-server 
JSON 规范 /模式 : 


e json-schema.org & jsonschema.net 
e jsonapi 


测试 框架 工具 


e Karma 
e Intern 
e NightWatch.js 


前 端 数据 存储 工具 


e YDN-DB 

e forerunner 
e AlaSQL 

e LokiJS 

e lovefiled 

e Dexie.js 

e localForage 
e pouchdb 
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模块 / 包 加 载 工 具 
e SystemJS 
e webpack 


e Broeserify 
e rollup.js 
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模块 / 包 仓库 工具 


e NPM 
e Bower 
e jspm.io 
e spmjs 


Web/ 云 /静态 主机 托管 工具 


AWS [$] 

Heroku [free to $] 
DigitalOcean [$] 
Modulus [$] 
DIVSHOT [free to $] 
netlify [free to $] 
surge [free to $] 


HA PH & 代码 托管 


e Github [free to $] 

e Codebase [$] 

e Bitbucket [free to $] 
e Unfuddle [$] 

e Assembla [free to $] 


合作 & 交流 工具 


e Slack & screenhero [free to $] 
e Skype [free to $] 
e Google Hangouts 


代码 /Github 合作 & 交流 : 
e Gitter [free to $] 
译 者 补充 : 


e Gitup 


内 容 管 理 托管 /API 工 具 


API CMS 工具 : 


e prismic.io [free to $] 
e contentful [$] 
e Cosmic JS [free to $] 


Hosted CMS tools: 


e LightCMS [$] 

e Surreal CMS [$] 

e Page Lime [$] 

e Cushy CMS [free to $] 


Static CMS tools: 


e Webhook.com 


前 端 开发 者 的 后 端 服务 工具 (又 称 BASS: Back-end as a 
service) 


数据 /后 端 服 务 管理 : 


e Firebase [free to $] 
e Parse [free to $] 

e kinvey [free to $] 

e Back& [free to $] 

e Pusher 


用 户 服务 管理 


e UserApp [free to $] 
e hull [$] 
e autho [$] 


ARLE 


e upup 
e offline.js 


pouchdb 
e hood.ie 
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KEL 
Coding tool: 


e DOMPurity 
e XSS 


References: 


e HTML5 Security Cheatsheet 


任务 管理 (又 称 构建 ) 工 具 
任务 管理 /构建 工具 : 


e Gulp 
e Grunt 


Tasking/build and more tools: 


e Brunch 
e Mimosa 


Ra LH 


。 FTPLOY [free to $] 

e Travis CI [free to $] 

e codeship [free to $] 

e Bamboo [$] 

e Springloops [free to $] 
è surge 

e sync ninja 


网 站 /APP 监控 工具 
Uptime: 


e pingdom [free to $] 
e Uptime Robot 
e Uptrends [$] 


General: 


e New Relic 


JavaScript 错误 监控 工具 


e Raygun [$] 

e errorception [$] 
e sentry [free to $] 
e {track:js} [$] 


性 能 
性 能 


性 能 工具 
Reporting: 


e WEIGHTOF.IT 

e Web Page Test 

e GTmetrix 

Speed Curve [$] 

e Chrome Devtools Timeline 


e sitespeed.io 
JS tools: 


e ImageOptim-CLl 
e imagemin 


Budgeting: 


e performancebudget.io 
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SVG 


SVG 工具 


优化 : 


SVGOMG 

Peter Collingridge's SVG Optimiser 
SVGO 

SVGO-GUI 

SVG Cleaner 

Scour SVG Scrubber 

Clean Multiple Gradient Stops 


SVG 编辑 器 : 


Illustrator 
Sketch 
Inkscape 
DrawSVG 


A135 2A: 


Icomoon 
Fontastic 
Grunticon 


Bug 追踪 : 


SVG Weirdness 
SVG Edit 
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